smalot-bootstrap-datetimepicker 使用心得

使用参考：http://www.bootcdn.cn/smalot-bootstrap-datetimepicker/readme/

 

定义控件类型：

    $(':text[data-ride="datetime"], input[type="datetime"]').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy/mm/dd hh:ii',
        autoclose: true,
        clearBtn: true,
        todayBtn: true,
        todayHighlight: true,
        bootcssVer: 3,
        fontAwesome: true
    });

 

页面改变控件类型：

 

//改变日期的类型
function changeType() {
    var type = $('#dateType').val();
    var myDate = new Date();
    if (type !== $('#dateStart').attr('data-ride') || type !== $('#dateEnd').attr('data-ride')) {
        $('#dateStart').datetimepicker('remove');
        $('#dateEnd').datetimepicker('remove');
        $('#dateStart').attr('data-ride', type);
        $('#dateEnd').attr('data-ride', type);

    }
    if (type === "year") {
        $('#dateStart,#dateEnd').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy',
            autoclose: true,
            bootcssVer: 3,
            fontAwesome: true,
            startView: 4,
            minView: 4,
            maxView: 4,
            minuteStep: 1
        });
        $('#dateStart').val(myDate.getFullYear());
        $('#dateEnd').val(myDate.getFullYear());
        $('#dateEnd').attr('disabled', true);
    }
    if (type === "month") {
        $('#dateStart,#dateEnd').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy/mm',
            autoclose: true,
            bootcssVer: 3,
            fontAwesome: true,
            startView: 3,
            minView: 3,
            maxView: 4,
            minuteStep: 1
        });
        $('#dateStart').val(myDate.getFullYear() + "/" + (myDate.getMonth()+1));
        $('#dateEnd').val(myDate.getFullYear() + "/" + (myDate.getMonth() + 1));
        $('#dateStart').datetimepicker('setEndDate', myDate.getFullYear() + "/" + (myDate.getMonth() + 1));
        $('#dateEnd').datetimepicker('setEndDate', myDate.getFullYear() + "/" + (myDate.getMonth() + 1));
        $('#dateEnd').removeAttr('disabled');
    }
    if (type === "day") {
        $('#dateEnd,#dateStart').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy/mm/dd',
            autoclose: true,
            bootcssVer: 3,
            fontAwesome: true,
            startView: 2,
            minView: 2,
            maxView: 4,
            minuteStep: 1
        });
        $('#dateStart').val(myDate.toLocaleDateString());
        $('#dateEnd').val(myDate.toLocaleDateString());
        $('#dateStart').datetimepicker('setEndDate', myDate.toLocaleDateString());
        $('#dateEnd').datetimepicker('setEndDate', myDate.toLocaleDateString());
        $('#dateEnd').removeAttr('disabled');
    }
}

 

　　在做控件类型变更的时候遇到了几个问题：

　　1、如何变更定义不同类型的时间控件（年、月、日）。

　　　　这个需要通过定义控件类型，实现定义好不同类型的时间控件。然后再页面统计属性调用。

　　2、如何改变时间控件的类型

　　　　这个我则是通过JQ的attr方法改变控件的属性值，从而达到改变控件的类型。

　　3、为什么attr动态改变类型后，datetimepicker依旧不生效

　　　　这个我发现datetimepicker这个控件是在js代码加载后动态生成的页面代码，改变类型无法直间改变生成的代码。只能先移除datetimepicker，然后再添加datetimepicker方能达到效果。

　　4、如何将时间控件的时间设置成当前时间。

　　　　改变类型后，赋值即可。

　　5、如何限制可选时间范围。

　　　　datetimepicker提供了setEndDate这个接口用于设置可选最终时间，调用设置即可。