JQuery WEUI的datetimePicker使用

wechat

　　此处主要记录，两个日期，截止时间不能大于开始时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!doctype html>
<html>
    <head>
         <!-- 省略 -->
        <!-- head 中 -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
        <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
    </head>
    <body ontouchstart>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">起始时间</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input type="text" id='startTime' class="weui_input" />
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">终止时间</label></div>
                <div class="weui_cell_bd weui_cell_primary" id="endTimeDiv">
                    <input type="text" id='endTime' class="weui_input" />
                </div>
            </div>
        </div>
        <!-- body 最后 -->
        <!-- body 最后 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>
    </body>
    <script type="text/javascript" >
        var curDateStr = '2017-10-12 10:10';
        $("#startTime").datetimePicker({
            title: '请选择起始时间',
            min : curDateStr,
            value: curDateStr,
            onClose: function(p) {  // 起始时间改变，更改终止时间的最小值
                console.log(p.value);
                // 获取新起始时间
                var year = p.value[0];
                var month = p.value[1];
                var day = p.value[2];
                var hour = p.value[3];
                var minute = p.value[4];
                var dateStr = year + "-" + month + "-" + day + " " + hour + ":" + minute;
                var date = new Date(Date.parse(dateStr.replace(/-/g, "/")));
                console.log(dateStr);
                // 获取旧终止时间
                var oldEndTimeStr = $("#endTime").val();
                var oldEndTime = new Date(Date.parse(oldEndTimeStr.replace(/-/g, "/")));
                // 旧终止时间>新的起始时间，不更改终止时间，否则，更新
                var newEndTimeStr;
                if (oldEndTime < date) {
                    newEndTimeStr = dateStr;
                } else {
                    newEndTimeStr = oldEndTimeStr;
                }
                $("#endTime").remove();
                $("#endTimeDiv").append('<input type="text" id="endTime" class="weui_input" />');
                $("#endTime").datetimePicker({
                    title: '请选择终止时间',
                    min: dateStr,   
                    value: newEndTimeStr
                });
            }
        });
        $("#endTime").datetimePicker({
            title: '请选择终止时间',
            min : curDateStr,
            value: curDateStr
        });
    </script>
</html>

本文标题:JQuery WEUI的datetimePicker使用

文章作者:hfy

发布时间:2017-05-11, 22:56:11

最后更新:2018-03-05, 11:06:59

原始链接:https://haofangyuan.github.io/2017/05/11/jquery-weui-datetimepicker/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
|