bootstrap-datetimepicker.js 记录
angular1.5+bootstrap-datetimepicker;
bower 安装 eonasdan-bootstrap-datetimepicker;
自动安装关联jq,moment
angular
.module('app')
.directive('dateTimePicker', ['regularService','toastr',datetimepicker]);
(function() { 'use strict'; angular .module('app') .directive('dateTimePicker', ['regularService','toastr',datetimepicker]); function datetimepicker(regularService,toastr) { var directive = { restrict: 'AEC', template: '<div class='input-group date' id='datetimepicker'> <input type='text' class="form-control" ng-disabled="disabled" ng-model="timeValue" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>', scope: { timeDisabled: '=',//是否禁用 timeValue:"=",//时间返回值 minDate:"=",//最小值 maxDate:"=",//最大值 format:"=",//时间格式 watchDate:"=",//选择后回调函数 pickerObj:"=",//dateTimePicker对象 warningReg:"@",//警告校验 errorReg:"@",//报错校验 warningval:"@",//警告提醒 errorval:"@",//报错提醒 }, controller: datetimepickerController, link: function(scope,element,attr){ var value=false //鼠标移开校验 /*element.find('input').focus(function(event) { $(this).removeClass("inputWarning") $(this).removeClass("inputError") });*/ // element.find('input').unbind("blur") element.find('input').blur(function(event) { if(scope.errorReg){ var reg=regularService.reg[scope.errorReg]; if(scope.errorReg=='nullValue'){ if(reg.test($(this).val())){ toastr.error(scope.errorval) $(this).addClass("inputError") return } }else{ if(!reg.test(element.val())){ toastr.error(scope.errorval) $(this).addClass("inputError") return } } // $(this).removeClass("inputWarning") $(this).removeClass("inputError") } if(scope.warningReg){ var reg=regularService.reg[scope.warningReg]; if(scope.warningReg=='nullValue'){ if(reg.test($(this).val())){ toastr.warning(scope.warningval) $(this).addClass("inputWarning") return } }else{ if(!reg.test($(this).val())){ toastr.warning(scope.warningval) $(this).addClass("inputWarning") return } } $(this).removeClass("inputWarning") } }); if(scope.pickerObj){ scope.pickerObj=element.children("#datetimepicker").datetimepicker({ format: scope.format||'YYYY-MM-DD',//'YYYY-MM-DD HH:mm', locale: moment.locale('zh-cn'), showTodayButton:true, sideBySide:false, minDate:scope.minDate, maxDate:scope.maxDate, useCurrent: false, //debug:true, //todayHighlight:true, // validateOnBlur:false, }).on('dp.change', function (e) { var result = new moment(e.date).format(scope.format||'YYYY-MM-DD'); var oldDate=new moment(e.oldDate).format(scope.format||'YYYY-MM-DD'); scope.timeValue= result; /* if(!value){ scope.timeValue='' e.date=false // scope.pickerObj.data('DateTimePicker').defaultDate("") }*/ if(result==oldDate) { return } scope.$apply(); if(scope.watchDate){ scope.watchDate(e) } }); }else{ element.children("#datetimepicker").datetimepicker({ format: scope.format||'YYYY-MM-DD',//'YYYY-MM-DD HH:mm', locale: moment.locale('zh-cn'), showTodayButton:true, sideBySide:false, minDate:scope.minDate, maxDate:scope.maxDate, }).on('dp.change', function (e) { var result = new moment(e.date).format(scope.format||'YYYY-MM-DD'); scope.timeValue= result; scope.$apply(); if(scope.watchDate){ scope.watchDate(e) } }); } }, }; return directive; function datetimepickerController($scope,regularService) { $scope.$watch('timeValue',function(v){ if(v=="Invalid date"){ $scope.timeValue="" } }) } } })();
日期到时分
<date-time-picker disabled="false" format="'YYYY-MM-DD HH:mm'" time-value="timeValue"></date-time-picker>
日期关联最小值最大值
<date-time-picker disabled="false" format="'YYYY-MM-DD'" time-value="dateOne" watch-date="watchDate1" picker-obj="picker1"></date-time-picker> <date-time-picker disabled="false" format="'YYYY-MM-DD'" time-value="dateTwo" picker-obj="picker2" watch-date="watchDate2"></date-time-picker>
watchDate监听时间变化,修改pickerObj,时间最大值最小值;
日期校验,失去焦点校验
<date-time-picker errorval="开始时间不能为空" error-reg="nullValue" disabled="false" format="'YYYY-MM-DD'" time-value=""></date-time-picker>
errorReg,校验正则nullValue为非空,errorVal,提醒框弹出提醒内容 minDate最小值,maxDate最大值;
(function(){ 'use strict'; angular .module('app') .factory('regularService',regularService); function regularService(){ var reg={ nullValue:/^\s*$/,//非空 number:/^[0-9]*$/,//数字 email:/(^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+)|(^$)/,//邮箱(可以为空) phone:/(^1\d{10}$)|(^$)/,//手机号码(可以为空) fourNumber:/^\d{4}$/,//四位数字 } var formService= { reg:reg, /*error: error, sort: sort, remove: remove, btns: btns, bundle: bundle, add: add*/ }; return formService; } })(window,document);
遇到问题:
locale: moment.locale('zh-cn'), 并不能改变日期弹窗框的语言,
moment.js 637行直接修改源码为中文
时间弹框一打开就自动选中当前日期,想去掉
useCurrent: false,//不选中当前时间
时间设置了最大值后最后一天第一次选择选不了,
原因,时间判断是否超出时间范围是以0点为临界点,但是每次第一次选择时间,都会自带 时分 这样选择最后一天,时间就超出临界点,但是选择其他日期再去选最后一天,时分就清除了。
bootstrap-datetimepicker.js
1041行对时间格式进行判断清除时分;
1 selectDay: function (e) { 2 if(options.format.indexOf('mm')>-1){ 3 var day = viewDate.clone(); 4 }else{ 5 var day = viewDate.clone().startOf('d') 6 }