jQuery UI 支援的時間元件timepicker

TA遠方發表於2019-07-27
jQueryUI元件

JQuery UI 支援日期+時間的元件,

網頁中head中需要先寫, 引入一些指令碼

<head>
    <link href="/Scripts/jquery-ui.css" rel="stylesheet" />
    <link href="/Scripts/jquery-ui-timepicker-addon.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="/Scripts/jquery-ui.js"></script>
    <script src="/Scripts/jquery-ui-timepicker-addon.js"></script>
</head>
複製程式碼

還有,在body中的顯示元件,是這樣子的

<input type="text" value="" placeholder="開始時間" name="input_datetime_start" id="datetimepicker" onchange="changeDate(this)" />
<input type="text" value="" placeholder="結束時間" name="input_datetime_end" id="datetimepicker2" />
複製程式碼

接著,在body中的指令碼中寫實現

$(document).ready(function () {
            // 元件支援中文顯示
            $.datepicker.regional['zh-CN'] = { 
                clearText: '清除', 
                clearStatus: '清除已選日期', 
                closeText: '關閉', 
                closeStatus: '不改變當前選擇', 
                prevText: '<上月', 
                prevStatus: '顯示上月', 
                prevBigText: '<<', 
                prevBigStatus: '顯示上一年', 
                nextText: '下月>', 
                nextStatus: '顯示下月', 
                nextBigText: '>>', 
                nextBigStatus: '顯示下一年', 
                currentText: '今天', 
                currentStatus: '顯示本月', 
                monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], 
                monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], 
                monthStatus: '選擇月份', 
                yearStatus: '選擇年份', 
                weekHeader: '周', 
                weekStatus: '年內周次', 
                dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
                dayNamesShort: ['週日','週一','週二','週三','週四','週五','週六'], 
                dayNamesMin: ['日','一','二','三','四','五','六'], 
                dayStatus: '設定 DD 為一週起始', 
                dateStatus: '選擇 m月 d日, DD', 
                dateFormat: 'yy-mm-dd', 
                firstDay: 1, 
                initStatus: '請選擇日期', 
                isRTL: false
            }; 
            $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
            //$.datepicker.formatDate("yy-mm-dd", new Date(2007, 1 - 1, 26));
            $('#datetimepicker').datetimepicker({
                needDay: true,
                changeMonth: true, //顯示月份
                changeYear: true, //顯示年份
                showButtonPanel: true,
                timeInput: true,
                onSelect: function (dateText, inst) {
                    $("#datetimepicker2").datetimepicker("option", "minDate", dateText);
                },
                dateFormat: "yy-mm-dd",
                timeFormat: "HH:mm:ss"
            });
            $('#datetimepicker2').datetimepicker({
                needDay: true,
                changeMonth: true, //顯示月份
                changeYear: true, //顯示年份
                showButtonPanel: true,
                timeInput: true,
                onSelect: function (dateText, inst) {
                    //$("#datetimepicker").datetimepicker("option", "maxDate", dateText);
                },
                dateFormat: "yy-mm-dd",
                timeFormat: "HH:mm:ss"
            });
}複製程式碼

當第一個輸入的開始時間選好後,為你自動填充第二個的結束時間, 看下面的指令碼實現

        function changeDate(clickDate) {
            let val = $(clickDate).val();
            if (val.trim() == '') return;

            var theDate = $.trim(val.split(" ")[0]);//頁面上第一個文字框的日期值

            var sdate = new Date(theDate);

            var edate = sdate;

            edate.setDate(edate.getDate() + 1);

            let m = edate.getMonth() + 1;
            if (m < 10) m = '0' + m;

            let d = edate.getDate();
            if (d < 10) d = '0' + d;

            $('#datetimepicker2').val(edate.getFullYear() + '-' + m + '-' + d + ' ' + val.split(" ")[1]);
        }複製程式碼

資料引用:

1. 時間元件 

www.cnblogs.com/zhixi/p/658…

www.jb51.net/article/503…

2. 兩個時間框關聯 

blog.csdn.net/sethwiseman…

3. 中文顯示 www.cnblogs.com/lost-1987/a…


相關文章