今天遇到一個比較噁心的需求吧,一道工序不可垮天,經過開始時間和結束時間計算工時,但是bootstrap中的時間控件很坑html
貼上原連接 https://github.com/Eonasdan/bootstrap-datetimepickergit
在github的demo中能夠找到只顯示時分秒的方法,先貼代碼github
首先是定義一個標籤bootstrap
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中調用ide
<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標籤,效果就出來了ui
而後就是js中的接收了,也是很坑的地方,當我編輯完時間,點擊保存,後臺用js獲取到了時間,可是。。。。spa
可是,獲取的時間是「當天日期」+「我選定的時分秒」,也就是說,我無論數據的數據是哪一天的8:31,js拿到的都是我電腦當前日期的8:31,這個問題是由於在定義標籤的時候,3d
format是定義了'HH:mm:ss',若是把年月日都帶上,那界面就不是說只有時分秒了,由於我要的僅僅是時分秒,選擇日期不能出現,由於我編輯的工序不能夠發生跨天。rest
因此,在最初拿到數據的時候,就得新加一個字段,保存下來,如:code
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的時分秒,這樣才能獲得所要的數據,太坑,搞了整整一天
也請大神指點,有沒有更好的方式