AngularJS自定义日期选择器指令
AngularJS custom datepicker directive
我想用自定义模板生成一个自定义日期选择器指令。
但我不知道如何开始构建它…
如何为我的指令包含日期数据?
我很感激你的指导,或者给我一些更准确地工作的建议。
它可能会对您有所帮助!按照以下步骤
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/.
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery最近父级的数据属性选择器
- Angular Datetimepicker:指令'的模板;uib时间选择器'必须只有一个根元素
- AngularJS自定义日期选择器指令
- 正在将日期范围选择器转换为角度指令
- 角度数据-bs-日期选择器指令 + 日期更改
- AngularJS指令,jQuery类选择器不起作用
- 如何绑定角度引导的bs日期选择器指令的select事件
- 如何在AngularJS中使用日期选择器,使用自定义指令作为类
- AngularJS指令多个选择器
- 角度ui和日期选择器指令错误
- 我可以使用Angularjs指令将日期选择器添加到HTML元素中吗
- angularJS的时间选择器自定义指令不起作用
- 如何编写angular指令,通过选择器来切换类
- 在Angular JS中,引导日期时间选择器对指令不起作用
- 使用指令范围的D3颜色选择器总是返回第一种颜色