jQuery DateTimePicker 日期和時間外掛程式樣本，jquery日期外掛程式

最後更新：2017-01-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery UI很強大，其中的日期選擇外掛程式Datepicker是一個配置靈活的外掛程式，我們可以自訂其展示方式，包括日期格式、語言、限制選擇日期範圍、添加相關按鈕以及其它導航等。

日期選擇外掛程式是一個配置靈活的外掛程式，你可以定義它的展示方式，包括日期格式、語言、限制選擇日期範圍、添加相關按鈕以及其它導航等

文檔和：

1、jQuery-Timepicker-Addon的：http://xiazai.jb51.net/201701/yuanma/jQuery-Timepicker-Addon_jb51.rar

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

3、JQuery-UI：http://jqueryui.com/themeroller/

4、JQuery：

jquery(1.32-1.11.1-2.1.1) http://www.bkjia.com/jiaoben/58.html

jquery 3.0 http://www.bkjia.com/codes/35629.html

下面先看：

引入js檔案：

<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" />

1、預設的效果：

關鍵代碼：

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

2、控制到時分秒：

關鍵代碼：

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

3、控制到年月日

關鍵代碼：

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

4、開始結束區間

關鍵代碼：

  $("#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());      }     });

5、時分秒選擇：

關鍵代碼：

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

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

關鍵代碼：

$.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>

代碼的：http://xiazai.jb51.net/201701/yuanma/Test_Datepicker_jb51.rar

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More