jQuery DateTimePicker 日期和時間插件示例
更新時間：2017年01月22日 17:01:15 作者：linYongJie
jQuery UI很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，這篇文章主要介紹了jQuery DateTimePicker 日期和時間插件示例，有興趣的可以了解一下。
jQuery UI很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關(guān)按鈕以及其它導(dǎo)航等。
日期選擇插件是一個配置靈活的插件，你可以定義它的展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關(guān)按鈕以及其它導(dǎo)航等
文檔和下載地址：
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://m.fzitv.net/jiaoben/58.html
jquery 3.0 http://m.fzitv.net/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、默認的效果：
關(guān)鍵代碼：
$("#defult").datetimepicker();
2、控制到時分秒：
關(guān)鍵代碼：
$('#date').prop("readonly", true).datetimepicker({
timeText: '時間',
hourText: '小時',
minuteText: '分鐘',
secondText: '秒',
currentText: '現(xiàn)在',
closeText: '完成',
showSecond: true, //顯示秒
timeFormat: 'HH:mm:ss' //格式化時間
});
3、控制到年月日
關(guān)鍵代碼：
$("#date_yy-mm-dd").prop("readonly", true).datepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
}
});
4、開始結(jié)束區(qū)間
關(guān)鍵代碼：
$("#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、時分秒選擇：
關(guān)鍵代碼：
$('#date_hhmmss').prop("readonly", true).timepicker({
timeText: '時間',
hourText: '小時',
minuteText: '分鐘',
secondText: '秒',
currentText: '現(xiàn)在',
closeText: '完成',
showSecond: true, //顯示秒
timeFormat: 'HH:mm:ss' //格式化時間
});
6、開始結(jié)束區(qū)間(第二種寫法)：
關(guān)鍵代碼：
$.timepicker.dateRange(
$("#date_start_1"),
$("#date_end_1"), {
minInterval: (1000 * 60 * 60 * 24 * 1), // 區(qū)間時間間隔時間
maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 區(qū)間時間間隔時間
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: '關(guān)閉',
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: '年內(nèi)周次',
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
dayStatus: '設(shè)置 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: '現(xiàn)在',
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: '現(xiàn)在',
closeText: '完成',
showSecond: true, //顯示秒
timeFormat: 'HH:mm:ss' //格式化時間
});
$.timepicker.dateRange(
$("#date_start_1"),
$("#date_end_1"), {
minInterval: (1000 * 60 * 60 * 24 * 1), // 區(qū)間時間間隔時間
maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 區(qū)間時間間隔時間
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 /> 開始結(jié)束區(qū)間：
<br />
<input id="date_start" />~<input id="date_end" />
<br />
<br /> 時分秒選擇：
<br />
<input id="date_hhmmss" />
<br />
<br /> 開始結(jié)束區(qū)間(第二種寫法)：
<br />
<input id="date_start_1" />~<input id="date_end_1" />
</body>
</html>
代碼的下載地址：http://xiazai.jb51.net/201701/yuanma/Test_Datepicker_jb51.rar
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery 日期分離成年月日的代碼
- jQuery實現(xiàn)倒計時（倒計時年月日可自己輸入）
- jQuery實現(xiàn)動態(tài)生成年月日級聯(lián)下拉列表示例
- jquery中實現(xiàn)時間戳與日期相互轉(zhuǎn)換
- 獲取客戶端電腦日期時間js代碼(jquery)
- jQuery帶時間的日期控件代碼分享
- jQuery移動端日期(datedropper)和時間(timedropper)選擇器附源碼下載
- jquery仿蘋果的時間/日期選擇效果
- jQuery時間日期三級聯(lián)動(推薦)
- 貼近用戶體驗的Jquery日期、時間選擇插件
- jQuery時間戳和日期相互轉(zhuǎn)換操作示例
- JavaScript自動生成 年月范圍 選擇功能完整示例【基于jQuery插件】
相關(guān)文章
瀏覽器端跨域訪問一直是個問題, 多數(shù)研發(fā)人員對待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時候,時不時地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級域名跨域訪問的問題.2009-12-12
jQuery實現(xiàn)ajax的疊加和停止(終止ajax請求)
這篇文章主要介紹了jQuery實現(xiàn)ajax的疊加和停止的關(guān)鍵代碼，代碼簡單易懂，需要的朋友可以參考下2016-08-08
本篇文章只要是對jquery ajax跨域解決方法(json方式)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery調(diào)用WebMethod(PageMethod) NET2.0的方法
這篇文章主要介紹了jQuery調(diào)用WebMethod(PageMethod) NET2.0的方法,結(jié)合實例形式分析了jQuery基于ajax調(diào)用.NET方法的相關(guān)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細介紹了jquery實現(xiàn)有過渡效果的tab切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了jQuery實現(xiàn)DIV層淡入淡出拖動特效的方法,涉及jQuery針對鼠標操作的常用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
基于jquery css3實現(xiàn)點擊動畫彈出表單源碼特效
這篇文章主要介紹了基于jquery css3實現(xiàn)點擊動畫彈出表單,彈出的表單沒有任何遮蓋層，在web前端程序開發(fā)中經(jīng)常會用到，需要的朋友可以參考下2015-08-08
jQuery實現(xiàn)可以編輯的表格實例詳解【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)可以編輯的表格,涉及jQuery響應(yīng)鼠標事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery實現(xiàn)的登錄浮動框效果代碼,點擊登陸鏈接可彈出懸浮登錄框,涉及jQuery中show與hide方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
通過XMLHttpRequest和jQuery實現(xiàn)ajax的幾種方式
AJAX大家已經(jīng)都知道了，是為了實現(xiàn)異步通訊，提高用戶體驗度，而將很多舊知識（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一個新的知識框架。而，XMLHttpRequest對象則是其中的重重之中,本篇文章主要給大家介紹通過XMLHttpRequest和jQuery實現(xiàn)ajax的幾種方式2015-08-08