Skip to content

bootstrap datetimepicker.js使用学习

Jump to bottom
jiang2016tao edited this page Dec 20, 2017 · 11 revisions

使用插件地址：https://github.com/Eonasdan/bootstrap-datetimepicker/
对时间组件的初始化

<input id="timeSearch" type='text' class="form-control date-time-picker" readonly
                                               placeholder="日期"
                                               data-key="startTime" dp.change="timeSearChange">
require('../components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js');

                //Date Time Picker
                if ($('.date-time-picker')[0]) {
                    $('.date-time-picker').datetimepicker({
                        locale: 'zh-cn',
                        format: 'YYYY-MM-DD',
                        ignoreReadonly: true
                    });

                    $("#timeSearch").data("DateTimePicker").date(wbkDate.dateFormat(new Date(), "isoDate"));
                }

初始化之后我们就可以在页面使用了。 在使用中，我们往往要控制最大和最小时间，或一段时间范围，可以通过如下方式设置：

if(stratT.val()){
                endT.data('DateTimePicker').minDate(stratT.val());
            }

            if(endT.val()){
                stratT.data('DateTimePicker').maxDate(endT.val());
            }

在项目中遇到头疼的问题就是初始化时间时，如何让插件自己知道值。
问题描述：当我点击按钮切换时，会初始化时间（采用jquery的val方法赋值），我选择一个时间，时间变化就会发送ajax请求。点击按钮切回来，在点击按钮切回去，时间会初始化，这时我在选择上次一样的时间，不会触发ajax请求。原因是时间插件认为值没有变化，事件没有得到触发。因此需要解决初始化时如何让插件感知值的变化。
正确初始化如下：

stratT.data("DateTimePicker").date(starttime);

在使用data("DateTimePicker")这样的时候，一定是要在被初始化后进行（例如本文的第一段代码）。
插件的不同，今天同样遇到bootstrap-datepicker的另外一个插件，这个插件没有时分秒，只能有年月天。

另外的bootstrap-datepicker时间插件，git地址：https://github.com/uxsolutions/bootstrap-datepicker

此插件就只能是年月日，但是我想显示时分，最后还是通过事件的处理的。具体的事件和用法可以在git上面找到文档。

$('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            language: 'zh-CN',
            disableTouchKeyboard: true,
            todayHighlight: true,
            clearBtn:true
        }).on("hide",function(e){
            var $obj=$(e.target).closest("input");
            var key=$obj.attr("data-key"),flag=$obj.attr("data-time");
            if(flag=="start"){
                $obj.val($obj.val()+" 00:00");
            }
            if(flag=="end"){
                $obj.val($obj.val()+" 23:59");
            }
            $scope.filterParam[key]=$obj.val();
        });

当时间框消失后来渲染文本框的值，这样来保证执行的顺序。其实最开始使用的是下面的方法来做的，但是怎么都渲染不上正确的值，所以就考虑可能是执行的顺序问题。可以自己讲两个事件方法写在一起，日志输出看看谁先谁后。

$('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            language: 'zh-CN',
            disableTouchKeyboard: true,
            todayHighlight: true
        }).change(function (e) {
            $timeout(function () {
                loadMetricData($scope.graphId, 1);
            }, 9);
        });

此插件同样可以清除日期：$(dateInput).data("datepicker").clearDates();

Clone this wiki locally