AngularJS自定义日期选择器指令

Question

我想用自定义模板进行自定义datepicker指令。

但我不知道如何开始建立它...

如何包括我的指令，最新的数据？

我感谢您的指导或给我一些建议，以更精确地工作。

Answer 1

它可能会帮助你！按照下面的步骤

HTML代码示例：

<label>Birth Date</label> 
<input type="text" ng-model="birthDate" date-options="dateOptions" custom-datepicker/> 

<hr/> 

<pre>birthDate = {{birthDate}}</pre> 

<script type="text/ng-template" id="custom-datepicker.html"> 
    <div class="enhanced-datepicker"> 
     <div class="proxied-field-wrap"> 
      <input type="text" ui-date-format="yy-mm-dd" ng-model="ngModel" ui-date="dateOptions"/> 
     </div> 
     <label> 
      <button class="btn" type="button"><i class="icon-calendar"></i></button> 
      <span class="datepicker-date">{{ngModel | date:'d MMM yyyy'}}</span> 
     </label> 
    </div> 
</script> 

JS代码示例：

angular 
    .module('App',['ui.date']) 
    .directive('customDatepicker',function($compile){ 
     return { 
      replace:true, 
      templateUrl:'custom-datepicker.html', 
      scope: { 
       ngModel: '=', 
       dateOptions: '=' 
      }, 
      link: function($scope, $element, $attrs, $controller){ 
       var $button = $element.find('button'); 
       var $input = $element.find('input'); 
       $button.on('click',function(){ 
        if($input.is(':focus')){ 
         $input.trigger('blur'); 
        } else { 
         $input.trigger('focus'); 
        } 
       }); 
      }  
     }; 
    }) 
    .controller('myController',function($scope){ 
     $scope.birthDate = '2013-07-23'; 
     $scope.dateOptions = { 
      minDate: -20, 
      maxDate: "+1M +10D" 
     }; 
    }); 

/*global angular */ 
/* 
jQuery UI Datepicker plugin wrapper 

@note If ≤ IE8 make sure you have a polyfill for Date.toISOString() 
@param [ui-date] {object} Options to pass to $.fn.datepicker() merged onto uiDateConfig 
*/ 

angular.module('ui.date', []) 

.constant('uiDateConfig', {}) 

.directive('uiDate', ['uiDateConfig', '$timeout', function (uiDateConfig, $timeout) { 
    'use strict'; 
    var options; 
    options = {}; 
    angular.extend(options, uiDateConfig); 
    return { 
    require:'?ngModel', 
    link:function (scope, element, attrs, controller) { 
     var getOptions = function() { 
     return angular.extend({}, uiDateConfig, scope.$eval(attrs.uiDate)); 
     }; 
     var initDateWidget = function() { 
     var showing = false; 
     var opts = getOptions(); 

     // If we have a controller (i.e. ngModelController) then wire it up 
     if (controller) { 

      // Set the view value in a $apply block when users selects 
      // (calling directive user's function too if provided) 
      var _onSelect = opts.onSelect || angular.noop; 
      opts.onSelect = function (value, picker) { 
      scope.$apply(function() { 
       showing = true; 
       controller.$setViewValue(element.datepicker("getDate")); 
       _onSelect(value, picker); 
       element.blur(); 
      }); 
      }; 
      opts.beforeShow = function() { 
      showing = true; 
      }; 
      opts.onClose = function(value, picker) { 
      showing = false; 
      }; 
      element.on('blur', function() { 
      if (!showing) { 
       scope.$apply(function() { 
       element.datepicker("setDate", element.datepicker("getDate")); 
       controller.$setViewValue(element.datepicker("getDate")); 
       }); 
      } 
      }); 

      // Update the date picker when the model changes 
      controller.$render = function() { 
      var date = controller.$viewValue; 
      if (angular.isDefined(date) && date !== null && !angular.isDate(date)) { 
       throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string'); 
      } 
      element.datepicker("setDate", date); 
      }; 
     } 
     // If we don't destroy the old one it doesn't update properly when the config changes 
     element.datepicker('destroy'); 
     // Create the new datepicker widget 
     element.datepicker(opts); 
     if (controller) { 
      // Force a render to override whatever is in the input text box 
      controller.$render(); 
     } 
     }; 
     // Watch for changes to the directives options 
     scope.$watch(getOptions, initDateWidget, true); 
    } 
    }; 
} 
]) 

.constant('uiDateFormatConfig', '') 

.directive('uiDateFormat', ['uiDateFormatConfig', function(uiDateFormatConfig) { 
    var directive = { 
    require:'ngModel', 
    link: function(scope, element, attrs, modelCtrl) { 
     var dateFormat = attrs.uiDateFormat || uiDateFormatConfig; 
     if (dateFormat) { 
     // Use the datepicker with the attribute value as the dateFormat string to convert to and from a string 
     modelCtrl.$formatters.push(function(value) { 
      if (angular.isString(value)) { 
      return jQuery.datepicker.parseDate(dateFormat, value); 
      } 
      return null; 
     }); 
     modelCtrl.$parsers.push(function(value){ 
      if (value) { 
      return jQuery.datepicker.formatDate(dateFormat, value); 
      } 
      return null; 
     }); 
     } else { 
     // Default to ISO formatting 
     modelCtrl.$formatters.push(function(value) { 
      if (angular.isString(value)) { 
      return new Date(value); 
      } 
      return null; 
     }); 
     modelCtrl.$parsers.push(function(value){ 
      if (value) { 
      return value.toISOString(); 
      } 
      return null; 
     }); 
     } 
    } 
    }; 
    return directive; 
}]); 

这里是工作提琴http://jsfiddle.net/FVfSL/。