angular-datepicker的github地址:https://github.com/g00fy-/angular-datepicker
这款插件在angular1.x上可以正常使用。
使用方法
安装方法可参照github,或者按顺序单独引入以下文件:
- 引入moment.js、moment-timezone.js、angular-datepicker.js;
- angular.module() 中注入datePicker依赖;
建议moment使用3.0以上版本
基本使用和常见问题
//html页面
<input date-time ng-model='startTime' id='startTime' date-change='changeDate' view='date' format='YYYY年MM月DD日 HH:mm'>
<input date-time ng-model='endTime' id='endTime' date-change='changeDate' view='date' format='YYYY年MM月DD日 HH:mm'>
//对应controller
//modelName:ng-model对应的名称,newDate:选择日期后的值 moment格式
$scope.changeDate = function (modelName, newDate) {
if (modelName=='startTime') {
$scope.$broadcast('pickerUpdate', ['endTime'], {
minDate: newDate,
maxDate: moment(newDate).endOf('day')
});
} else if (modelName=='scheduleStopTime') {
$scope.endTime = newDate;
}
};
ng-model不写 会报错;
我使用的angular为1.4.7,时间的初始值在使用date或者字符串的时候,会报错,moment
- ng-model不写,会报错,对应无数值情况下,默认显示当前时间
我使用的angular为1.4.7,时间的初始值的格式为Date或者字符串时会报错,最好使用moment进行格式转换,例如moment(startTime) - date-change 方法对应修改日期时的操作,modelName对应ng-model的名称,newDate为修改后日期,moment格式;
- id 在使用 pickerUpdate 的时候使用,我用的版本在修改日期后无法自动更新model, s c o p e . scope. scope.broadcast可以更新其他时间插件的相关属性的数值;
- format格式的设置:参照 moment 的 字符串+格式;
- angular-datepicker.js 文件中 datePickerConfig 的 step 属性可以设置分钟的时间间隔,例如需要在选择时间的时候以30分钟为一个间隔。