Bootstrap-datetimepicker 控件只显示时分秒
今天遇到一个比较恶心的需求吧,一道工序不可垮天,通过开始时间和结束时间计算工时,可是bootstrap中的时间控件很坑
贴上原链接 https://github.com/Eonasdan/bootstrap-datetimepicker
在github的demo中可以找到只显示时分秒的方法,先贴代码
首先是定义一个标签
wmsApp.directive('timepicker', function ($parse) { return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, ngModelCtrl) { var picker = $(element).datetimepicker({ format: 'HH:mm:ss', useCurrent: false, showTodayButton: false, showClear: false, showClose: false, locale: moment.locale('zh-cn') }); //model->view ngModelCtrl.$render = function (value) { if (ngModelCtrl.$viewValue) { $(element).data('DateTimePicker').date(ngModelCtrl.$viewValue); } else { $(element).data('DateTimePicker').clear(); } }; //view->model picker.on('dp.change', function (e) { if (e.date) { ngModelCtrl.$setViewValue(new moment(e.date).format('YYYY-MM-DD HH:mm:ssZ')); } else { ngModelCtrl.$setViewValue(null); } }); } }; });
然后html中调用
<div class="form-group" ng-class="{ 'has-error': editForm.startTime.$invalid && editForm.startTime.$dirty }"> <label class="col-md-4 control-label"><font color="red">*</font> 开始时间:</label> <div class='col-md-8'> <input type='text' name="startTime" timepicker class="form-control" ng-model="model.StartTime" /> </div> </div>
在input中使用新定义的 timepicker标签,效果就出来了
然后就是js中的接收了,也是很坑的地方,当我编辑完时间,点击保存,后台用js获取到了时间,但是。。。。
但是,获取的时间是“当天日期”+“我选定的时分秒”,也就是说,我不管数据的数据是哪一天的8:31,js拿到的都是我电脑当前日期的8:31,这个问题是因为在定义标签的时候,
format是定义了'HH:mm:ss',如果把年月日都带上,那界面就不是说只有时分秒了,因为我要的仅仅是时分秒,选择日期不能出现,因为我编辑的工序不可以发生跨天。
所以,在最初拿到数据的时候,就得新加一个字段,保存下来,如:
return workHourService.query(params, $scope.filter).then(function (data) { for (var i = 0; i < data.length; i++) { data[i].Date = data[i].StartTime; } return data; });
然后用Date的日期加上StartTime的时分秒,这样才能得到所要的数据,太坑,搞了整整一天
也请大神指点,有没有更好的方式