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 }
浙公网安备 33010602011771号