angular-datepicker使用问题记录

angular-datepicker使用问题记录

angular-datepicker的github地址:https://github.com/g00fy-/angular-datepicker
这款插件在angular1.x上可以正常使用。

使用方法

安装方法可参照github,或者按顺序单独引入以下文件:

  1. 引入moment.js、moment-timezone.js、angular-datepicker.js;
  2. 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

  1. ng-model不写,会报错,对应无数值情况下,默认显示当前时间
    我使用的angular为1.4.7,时间的初始值的格式为Date或者字符串时会报错,最好使用moment进行格式转换,例如moment(startTime)
  2. date-change 方法对应修改日期时的操作,modelName对应ng-model的名称,newDate为修改后日期,moment格式;
  3. id 在使用 pickerUpdate 的时候使用,我用的版本在修改日期后无法自动更新model, s c o p e . scope. scope.broadcast可以更新其他时间插件的相关属性的数值;
  4. format格式的设置:参照 moment字符串+格式
  5. angular-datepicker.js 文件中 datePickerConfigstep 属性可以设置分钟的时间间隔,例如需要在选择时间的时候以30分钟为一个间隔。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值