jQuery-UI是一个集成丰富的Jquery的界面插件集，其中里面有datepicker日期插件，使用也是十分广泛，下面介绍下jQuery UI中datepicker日期插件详情使用方法。
Jquery UI下载地址：https://jqueryui.com/download/
先看下datepicker效果截图，默认选项是英文的界面
HTML简易使用
<script src="../Script/jquery-1.11.1.min.js"></script>
<script src="../Script/jquery-ui.min.js"></script>
<link href="../Css/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript">
$(".datepicker").datepicker({
numberOfMonths: 1,
dateFormat: "yy-mm-dd"
});
</script>
HTML详细参数使用
<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>
datepicker方法参数选项：
<script>
$( "#datepicker" ).datepicker({
showAnim:"slideDown", //日期框出现时使用的特效
showOtherMonths: true, //datepicker默认只显示当前月
selectOtherMonths: true, //true:可以选择其他月份的日期
showButtonPanel: true,//默认在底部没有“today”和“done”，配置此项显示这两个按钮
changeMonth: true,//默认月份只能通过向左或向右的按钮来改变，这里配置为true之后就出现了月份的下拉框
changeYear: true,//类似changeMonth
numberOfMonths: 1,//显示几个datepicker面板，一般就一个就可以了，有时候选择日期范围的时候可能用到多个
dateFormat:"yy-mm-dd",//y:表示两位格式的年，yy表示四位格式的年，mm表示两位格式的月份，dd表示两位格式的天
showOn: "button",
buttonImage: "calendar.png",//这个图标当然是自己准备的了
buttonImageOnly: false,//true：表示只能点击图标才能触发日历的显示
//默认显示[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]，表示周日到周六，这里使用 dayNamesMin属性汉化
dayNamesMin:["日", "一", "二", "三", "四", "五", "六"],
//默认显示["January","February","March","April","May","June","July","August","September",
//"October","November","December" ]
//表示十二个月，这里通过指定汉字实现月份的汉化
monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
});
</script>
例子：实现开始日期和结束日期的选择，且结束时间不能大于开始时间。
如上所示：当开始日期选择了“2018-04-10”之后，结束日期能够选择的日期只能是大于等于这个日期的，反之亦然。要实现的效果就是这样，怎么做的呢？
先来看html部分：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>datepicker-jquery-ui日期选择器</title> <link href="./jquery-ui.min.css" rel="stylesheet"/> <script src="./external/jquery/jquery.js"></script> <script src="./jquery-ui.min.js"></script> <style> </style> </head> <body > <label for="from">从</label> <input type="text" id="from" name="from"> <label for="to">到</label> <input type="text" id="to" name="to"> </body> </html>
下面就是实现这个功能的javascript代码：
<script>
$( "#from" ).datepicker({
showAnim:"slideDown",
changeMonth: true,
changeYear: true,
dateFormat:"yy-mm-dd",
dayNamesMin:[ "日", "一", "二", "三", "四", "五", "六"],
monthNamesShort:[ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
showAnim:"slideDown",
changeMonth: true,
changeYear: true,
dateFormat:"yy-mm-dd",
dayNamesMin:[ "日", "一", "二", "三", "四", "五", "六"],
monthNamesShort:[ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
</script>
jquery ui datepicke汉化
jquery ui datepicker默认都是英文的，要想显示中文需要汉化，上面给大家说了汉化，但是并没有着重的去说汉化的问题，这次一次性说明白，最终效果如下：
$("#datepicker").datepicker({
showButtonPanel: true,
dateFormat: 'yy-mm-dd',
firstDay: 1,//默认是周日显示在最左边，这里设置显示顺序为周一到周日,0：日，1：周一....6:周六
changeMonth: true,
changeYear: true,
closeText: '关闭',//默认done
prevText: '<上月',//默认提示prev
nextText: '下月>',//默认提示next
currentText: '今天',//默认today
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
weekHeader: '周',
isRTL: false,//设置为false表示文字从左到右，true表示从右到左
showMonthAfterYear: true,//datepicker顶部默认显示格式是"四月 2018"这里配置显示为"2018年四月"
yearSuffix: '年' //在datepicker顶部年份后边加上后缀
});
