AngularJS之jeDate日期控件基本使用
程序员文章站
2022-04-24 12:30:28
业务背景: 初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键、时分秒等。鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDate,总体效果还可以 基本封装使用: ......
业务背景:
初学angularjs,最近一段时间,因业务需求,要求日期选择带有快捷键、时分秒等。鉴于angularjs组件库ui-bootstrap没有此功能,找了一款基于原生js实现的插件-jedate,总体效果还可以
基本封装使用:
xxx.directive('jedatepicker', function ($compile, $timeout) {
return{
restrict: 'a',
require: 'ngmodel',//依赖的指令
scope: {
'ngmodel': '=' //=双向数据绑定,@单向数据绑定, &调用父作用域的函数
},
link: function ($scope, $element, $attr) {
/**
* exp:
* <input type="text" id="test" class="form-control" ng-model="test" je-datepicker>
*/
var id = $attr.id;
var options = {
id: '#' + id
};
options.mindate = $attr.mindate ? $attr.mindate : '1900-01-01 00:00:00';
options.maxdate = $attr.maxdate ? $attr.maxdate : '2099-12-31 23:59:59';
options.format = $attr.format ? $attr.format : 'yyyy-mm-dd hh:mm:ss';
options.shortcut = [
{name:"一周",val:{dd:7}},
{name:"一个月",val:{dd:30}},
{name:"二个月",val:{mm:2}},
{name:"三个月",val:{mm:3}},
{name:"一年",val:{dd:365}}
];
options.donefun = function (obj) {//选中日期的回调
$scope.$apply(function () {
$scope.ngmodel = obj.val;
})
};
options.clearfun = function() {//清除日期后的回调
$scope.$apply(function () {
$scope.ngmodel = '';
})
};
$timeout(function () {
jedate(options.id, options);
}, 1);
}
}
})