zoukankan      html  css  js  c++  java
  • 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这个接口用于设置可选最终时间,调用设置即可。

  • 相关阅读:
    1058 A+B in Hogwarts (20)
    1046 Shortest Distance (20)
    1061 Dating (20)
    1041 Be Unique (20)
    1015 Reversible Primes (20)(20 分)
    pat 1027 Colors in Mars (20)
    PAT 1008 Elevator (20)
    操作系统 死锁
    Ajax的get方式传值 避免& 与= 号
    让IE浏览器支持CSS3表现
  • 原文地址:https://www.cnblogs.com/Voctor/p/6272744.html
Copyright © 2011-2022 走看看