Skip to content

bootstrap datetimepicker.js使用学习

Jump to bottom
jiang2016tao edited this page Nov 10, 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);

Clone this wiki locally