jQuery DateTimePicker 日期和時間插件

時間 2019-11-08

標籤 jquery datetimepicker 日期時間插件欄目 JQuery 简体版

原文原文鏈接

jQuery UI很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，咱們能夠自定義其展現方式，包括日期格式、語言、限制選擇日期範圍、添加相關按鈕以及其它導航等。javascript

日期選擇插件是一個配置靈活的插件，你能夠定義它的展現方式，包括日期格式、語言、限制選擇日期範圍、添加相關按鈕以及其它導航等css

文檔和下載地址：html

一、jQuery-Timepicker-Addon的下載地址：https://github.com/trentrichardson/jQuery-Timepicker-Addonjava

二、jQuery-Timepicker-Addon的的文檔地址：http://trentrichardson.com/examples/timepicker/jquery

三、DateTimePicker的演示地址：http://www.helloweba.com/demo/timepicker/git

四、JQuery-UI下載地址：http://jqueryui.com/themeroller/github

六、JQuery下載地址：http://www.jq22.com/jquery-info122web

下面先看效果圖：ui

引入js文件：this

<script src="js/jquery-3.1.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
<link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

一、默認的效果：

關鍵代碼：

$("#defult").datetimepicker();

二、控制到時分秒：

關鍵代碼：

                $('#date').prop("readonly", true).datetimepicker({
                        timeText: '時間',
                        hourText: '小時',
                        minuteText: '分鐘',
                        secondText: '秒',
                        currentText: '如今',
                        closeText: '完成',
                        showSecond: true, //顯示秒  
                        timeFormat: 'HH:mm:ss' //格式化時間  
                    });

三、控制到年月日

關鍵代碼：

                $("#date_yy-mm-dd").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {

                        }

                    });

四、開始結束區間

關鍵代碼：

        $("#date_start").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {
                            $("#date_end").datepicker("option", "minDate", selectedDate);
                        }
                    });

                    $("#date_end").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {
                            $("#date_start").datepicker("option", "maxDate", selectedDate);
                            $("#date_end").val($(this).val());
                        }
                    });

五、時分秒選擇：

關鍵代碼：

                       $('#date_hhmmss').prop("readonly", true).timepicker({
                        timeText: '時間',
                        hourText: '小時',
                        minuteText: '分鐘',
                        secondText: '秒',
                        currentText: '如今',
                        closeText: '完成',
                        showSecond: true, //顯示秒  
                        timeFormat: 'HH:mm:ss' //格式化時間  
                    });

六、開始結束區間(第二種寫法)：

關鍵代碼：

                $.timepicker.dateRange(
                        $("#date_start_1"),
                        $("#date_end_1"), {
                            minInterval: (1000 * 60 * 60 * 24 * 1), // 區間時間間隔時間
                            maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 區間時間間隔時間
                            start: {}, // start picker options
                            end: {} // end picker options});
                        }
                    );

完整代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
        <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
        <script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
        <script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
        <link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
        <script type="text/javascript">
            (function($) {

                $(function() {
                    $.datepicker.regional['zh-CN'] = {
                        changeMonth: true,
                        changeYear: true,
                        clearText: '清除',
                        clearStatus: '清除已選日期',
                        closeText: '關閉',
                        closeStatus: '不改變當前選擇',
                        prevText: '<上月',
                        prevStatus: '顯示上月',
                        prevBigText: '<<',
                        prevBigStatus: '顯示上一年',
                        nextText: '下月>',
                        nextStatus: '顯示下月',
                        nextBigText: '>>',
                        nextBigStatus: '顯示下一年',
                        currentText: '今天',
                        currentStatus: '顯示本月',
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        monthStatus: '選擇月份',
                        yearStatus: '選擇年份',
                        weekHeader: '周',
                        weekStatus: '年內周次',
                        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        dayNamesShort: ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                        dayStatus: '設置 DD 爲一週起始',
                        dateStatus: '選擇 m月 d日, DD',
                        dateFormat: 'yy-mm-dd',
                        firstDay: 1,
                        initStatus: '請選擇日期',
                        isRTL: false
                    };

                });

                $(function() {

                    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
                    
                    $("#defult").datetimepicker();
                    
                    $('#date').prop("readonly", true).datetimepicker({
                        timeText: '時間',
                        hourText: '小時',
                        minuteText: '分鐘',
                        secondText: '秒',
                        currentText: '如今',
                        closeText: '完成',
                        showSecond: true, //顯示秒  
                        timeFormat: 'HH:mm:ss' //格式化時間  
                    });

                    $("#date_yy-mm-dd").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {

                        }

                    });

                    $("#date_start").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {
                            $("#date_end").datepicker("option", "minDate", selectedDate);
                        }
                    });

                    $("#date_end").prop("readonly", true).datepicker({
                        changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        onClose: function(selectedDate) {
                            $("#date_start").datepicker("option", "maxDate", selectedDate);
                            $("#date_end").val($(this).val());
                        }
                    });

                    $('#date_hhmmss').prop("readonly", true).timepicker({
                        timeText: '時間',
                        hourText: '小時',
                        minuteText: '分鐘',
                        secondText: '秒',
                        currentText: '如今',
                        closeText: '完成',
                        showSecond: true, //顯示秒  
                        timeFormat: 'HH:mm:ss' //格式化時間  
                    });

                    $.timepicker.dateRange(
                        $("#date_start_1"),
                        $("#date_end_1"), {
                            minInterval: (1000 * 60 * 60 * 24 * 1), // 區間時間間隔時間
                            maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 區間時間間隔時間
                            start: {}, // start picker options
                            end: {} // end picker options});
                        }
                    );
                    
                    
                });
                
                
            }(jQuery));
        </script>
    </head>

    <body>
        
        默認：
        <input id="defult" />
        <br/>
        <br />
        控制到時分秒：<input id="date" />
        <br />
        <br /> 控制到年月日：
        <input id="date_yy-mm-dd" />
        <br />
        <br /> 開始結束區間：
        <br />
        <input id="date_start" />~<input id="date_end" />
        <br />
        <br /> 時分秒選擇：
        <br />
        <input id="date_hhmmss" />
        <br />
        <br /> 開始結束區間(第二種寫法)：
        <br />
        <input id="date_start_1" />~<input id="date_end_1" />
    </body>

</html>