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;
            });
View Code

然后用Date的日期加上StartTime的時分秒,這樣才能得到所要的數據,太坑,搞了整整一天

也請大神指點,有沒有更好的方式

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM