一、引入js、css文件
<script src="../Script/jquery-1.11.1.min.js"></script>
<script src="../Script/jquery-ui.min.js"></script>
<script src="../Script/jquery-ui-timepicker-addon.js"></script>
<link href="../Css/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
BindDatePicker();
BindDateTimePicker();
});
//日期選擇
function BindDatePicker() {
var myDate = new Date();
var date = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate();
$(".datepicker").each(function () {
if ($(this).hasClass("hasDatepicker") == false) {
var min = $(this).hasClass("minCurDate") ? date : '1900-01-01';
var max = $(this).hasClass("maxCurDate") ? date : '3000-12-31';
$(this).datepicker({//添加日期選擇功能
// showOn: "both",
// buttonText: '',
numberOfMonths: 1,//顯示幾個(gè)月
showButtonPanel: true,//是否顯示按鈕面板
dateFormat: 'yy-mm-dd',//日期格式
currentText: "當(dāng)前",
clearText: "清除",//清除日期的按鈕名稱
closeText: "關(guān)閉",//關(guān)閉選擇框的按鈕名稱
yearSuffix: '年', //年的后綴
showMonthAfterYear: true,//是否把月放在年的后面
//defaultDate: '2011-03-10',//默認(rèn)日期
minDate: min,//最小日期
maxDate: max,//'3000-12-31',//最大日期
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
changeMonth: true,
changeYear: true
});
$(this).bind("blur", function () {
var selectedDate = $(this).val();
if (selectedDate == '')
return;
if ($(this).hasClass("datepickerend"))
return;
if (selectedDate < min) {
$(this).val(min);
}
if (selectedDate > max) {
$(this).val(max);
}
});
}
});
}
//日期選擇
function BindDateTimePicker() {
var myDate = new Date();
var date = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes();
$(".datetimepicker").each(function () {
if ($(this).hasClass("hasDatepicker") == false) {
var min = $(this).hasClass("minCurDate") ? date : '1900-01-01 00:00';
var max = $(this).hasClass("maxCurDate") ? date : '3000-12-31 00:00';
$(this).datetimepicker({//添加日期選擇功能
// showOn: "both",
// buttonText: '',
numberOfMonths: 1,//顯示幾個(gè)月
showButtonPanel: true,//是否顯示按鈕面板
dateFormat: 'yy-mm-dd',//日期格式
currentText: "當(dāng)前",
clearText: "清除",//清除日期的按鈕名稱
closeText: "關(guān)閉",//關(guān)閉選擇框的按鈕名稱
yearSuffix: '年', //年的后綴
showMonthAfterYear: true,//是否把月放在年的后面
//defaultDate: '2011-03-10',//默認(rèn)日期
minDate: min,//最小日期
maxDate: max,//'3000-12-31',//最大日期
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
controlType: myControl,
timeFormat: 'HH:mm',
timeText: '時(shí)間',
hourText: '小時(shí)',
minuteText: '分鐘',
changeMonth: true,
changeYear: true
});
$(this).bind("blur", function () {
var selectedDate = $(this).val();
if (selectedDate == '')
return;
if (selectedDate < min) {
$(this).val(min);
}
if (selectedDate > max) {
$(this).val(max);
}
});
}
});
}
var myControl = {
create: function (tp_inst, obj, unit, val, min, max, step) {
$('<input class="ui-timepicker-input" value="' + val + '" style="width:50%">')
.appendTo(obj)
.spinner({
min: min,
max: max,
step: step,
change: function (e, ui) { // key events
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
},
spin: function (e, ui) { // spin events
tp_inst.control.value(tp_inst, obj, unit, ui.value);
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
}
});
return obj;
},
options: function (tp_inst, obj, unit, opts, val) {
if (typeof (opts) == 'string' && val !== undefined)
return obj.find('.ui-timepicker-input').spinner(opts, val);
return obj.find('.ui-timepicker-input').spinner(opts);
},
value: function (tp_inst, obj, unit, val) {
if (val !== undefined)
return obj.find('.ui-timepicker-input').spinner('value', val);
return obj.find('.ui-timepicker-input').spinner('value');
}
};
</script>
二、HTML代碼
<input type="text" class="datepicker">
<input type="text" class="datetimepicker">
<input type="text" id="date">
<script type="text/javascript">
$("#date").addClass("datetimepicker");
$("#date").timepicker({
timeOnlyTitle: '選擇時(shí)間',
timeText: '時(shí)間',
hourText: '小時(shí)',
minuteText: '分鐘',
currentText: '當(dāng)前',
closeText: '關(guān)閉',
timeFormat: 'HH:mm'
});
</script>
三、顯示日期，效果圖
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-607349.html
四、只選擇時(shí)間，效果圖
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-607349.html
到了這里，關(guān)于jQuery-UI DateTimePicker日期和時(shí)間插件，顯示日期和時(shí)間、只顯示日期、只選擇時(shí)間的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
