一、引入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,//显示几个月
showButtonPanel: true,//是否显示按钮面板
dateFormat: 'yy-mm-dd',//日期格式
currentText: "当前",
clearText: "清除",//清除日期的按钮名称
closeText: "关闭",//关闭选择框的按钮名称
yearSuffix: '年', //年的后缀
showMonthAfterYear: true,//是否把月放在年的后面
//defaultDate: '2011-03-10',//默认日期
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,//显示几个月
showButtonPanel: true,//是否显示按钮面板
dateFormat: 'yy-mm-dd',//日期格式
currentText: "当前",
clearText: "清除",//清除日期的按钮名称
closeText: "关闭",//关闭选择框的按钮名称
yearSuffix: '年', //年的后缀
showMonthAfterYear: true,//是否把月放在年的后面
//defaultDate: '2011-03-10',//默认日期
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: '时间',
hourText: '小时',
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: '选择时间',
timeText: '时间',
hourText: '小时',
minuteText: '分钟',
currentText: '当前',
closeText: '关闭',
timeFormat: 'HH:mm'
});
</script>
三、显示日期，效果图
文章来源：https://www.toymoban.com/news/detail-607349.html
四、只选择时间，效果图
文章来源地址https://www.toymoban.com/news/detail-607349.html
到了这里，关于jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
