jQuery DateTimePicker 日期和時間插件示例
更新時間：2017年01月22日 17:01:15 作者：linYongJie
jQuery UI很強(qiáng)大，其中的日期選擇插件Datepicker是一個配置靈活的插件，這篇文章主要介紹了jQuery DateTimePicker 日期和時間插件示例，有興趣的可以了解一下。
jQuery UI很強(qiáng)大，其中的日期選擇插件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://www.dbjr.com.cn/jiaoben/58.html
jquery 3.0 http://www.dbjr.com.cn/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、默認(rèn)的效果：
關(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: '不改變當(dāng)前選擇',
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>
默認(rèn)：
<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é)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 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ù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法2010-12-12
這篇文章主要介紹了JQuery手速測試小游戲?qū)崿F(xiàn)思路詳解,本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結(jié)合實例形式分析了基于jQuery的鼠標(biāo)事件響應(yīng)與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
簡單實現(xiàn)限制uploadify上傳個數(shù)
本文給大家分享的是在使用uploadify上傳文件或者圖片的時候，如何做到限制上傳個數(shù)的方法，十分的簡單方便實用，有需要的小伙伴可以參考下。2015-11-11
動態(tài)調(diào)用css文件——jquery的應(yīng)用
這篇文章主要介紹了動態(tài)調(diào)用css文件——jquery的應(yīng)用2007-02-02
本文給大家介紹的是jquery中添加屬性和刪除屬性的方法和具體的示例，有需要的小伙伴可以參考下2015-06-06
這篇文章主要介紹了jQuery中hide()方法用法,以實例形式較為詳細(xì)的分析了hide()方法的定義、功能與使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
基于jquery實現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中
這篇文章主要介紹了基于jquery實現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中的方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery通過deferred對象管理ajax異步的相關(guān)資料,需要的朋友可以參考下2016-05-05
iframe在復(fù)合文檔中經(jīng)常用到，利用jquery操作iframe可以大幅提高效率，這里收集一些基本操作，需要的朋友可以參考下2013-07-07