Skip to content

bootstrap datetimepicker.js使用学习

Jump to bottom
jiang2016tao edited this page Mar 11, 2019 · 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")这样的时候，一定是要在被初始化后进行（例如本文的第一段代码）,这样使用后就会触发sp.change事件，但是如果是用val函数赋值，就不会触发sp.change事件，但是插件的时间选中状态就不对了。
使用插件的方法注意：今天使用maxDate（）给结束时间设置最大时间时，出现问题。如果我第一次设置的是2018-04-11为结束时间的最大时间，当我再次设置最大时间为2018-04-12，这个时候结束框的最大时间被设置了，同时会给结束节点赋值上当前的值。同样minDate()也有同样的问题。

if (options.useCurrent && !options.keepInvalid && date.isAfter(maxDate)) {
                setValue(options.maxDate);
            }

发现就是上面的代码，由于if条件成立，进入了设置函数。
日历UI上的事件都定义在actions里
选中天的事件函数

selectDay: function (e) {
                    console.log(element);
                    var day = viewDate.clone();

                    if ($(e.target).is('.old')) {
                        day.subtract(1, 'M');
                    }
                    if ($(e.target).is('.new')) {
                        day.add(1, 'M');
                    }
                    if(element.attr("data-time")=="start"){
                        setValue(day.date(parseInt($(e.target).text(), 10)).hours(0).minutes(0));
                    }
                    else if(element.attr("data-time")=="end"){
                        setValue(day.date(parseInt($(e.target).text(), 10)).hours(23).minutes(59));
                    }
                    else{
                        setValue(day.date(parseInt($(e.target).text(), 10)));
                    }

                    if (!hasTime() && !options.keepOpen && !options.inline) {
                        hide();
                    }
                },

插件的不同，今天同样遇到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();
设置两个时间选择范围如下：

$('.datepicker').on("changeDate",function(e){
            var $startTime=$("#start_time"),
                $endTime=$("#end_time"),
                startTime=$startTime.val(),
                endTime=$endTime.val();
            if(e){
                $(e.target).blur();
            }
            if(startTime){
                //$endTime.data("datepicker").setStartDate(startTime);//这样设置后，不能让我选startTime这天
                $endTime.data("datepicker").setStartDate(new Date(new Date(startTime).getTime()));
            }
            if(endTime){
                $startTime.data("datepicker").setEndDate(endTime);
            }
        });

注意，设置时间值的方法有所不同，其他的估计也会有类似的：

$startTime.data("datepicker").setDates(new Date());

Clone this wiki locally