jQuery UI很強(qiáng)大，其中的日期選擇插件Datepicker是一個配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關(guān)按鈕以及其它導(dǎo)航等。
成都創(chuàng)新互聯(lián)公司專注于沙灣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供沙灣營銷型網(wǎng)站建設(shè)，沙灣網(wǎng)站制作、沙灣網(wǎng)頁設(shè)計、沙灣網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造沙灣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供沙灣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
日期選擇插件是一個配置靈活的插件，你可以定義它的展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關(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) https://www.jb51.net/jiaoben/58.html
jquery 3.0 https://www.jb51.net/codes/35629.html
下面先看效果圖：
引入js文件：
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});
}
);完整代碼：
默認(rèn)：
控制到時分秒：
控制到年月日：
開始結(jié)束區(qū)間：
~
時分秒選擇：
開始結(jié)束區(qū)間(第二種寫法)：
~
代碼的下載地址：http://xiazai.jb51.net/201701/yuanma/Test_Datepicker_jb51.rar
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
