jqueryUI 日历
《1》
<html>
<head>
<title></title>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<input type="text" id="rili" />
</body>
</html>
<script type="text/javascript">
$("#rili").datepicker({
//--------------------------下面四行代码就可以将整个日历中文化了---------------------------------//
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],//以数组形式指定星期中的天的最小格式。
firstDay: 1,//指定日历中的星期从星期几开始。0 表示星期日。
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
//-----------------------------------------------------------------------------------//
dateFormat: 'yy-mm-dd', //指定日历返回的日期格式。例如：2015-5-12
showOtherMonths: true,//如果设置为true，当月中没有使用的单元格会显示填充(即填充上个月末尾的日期)，但那些日期无法使用
changeYear: true, ///设置为true，在日历上显示快速选择年份的下拉列表。
changeMonth: true, ///设置为true，在日历上显示快速选择月份的下拉列表。
showMonthAfterYear: true,//设置为true，则将月份放置在年份之后
//showOn: "button", //如果这里设置为"button"那么日历绑定的控件#rili后面会多出一个按钮，点击一下这个按钮就会弹出日历（此时点击#rili就不会再弹出日历框了）
showOn: "both",//如果这里设置为"both"那么日历绑定的控件#rili后面也会多出一个按钮，点击这按钮或者点击#rili都会弹出日历框
buttonText: "日历",// 上面说了设置了showOn:"both"或showOn: "button"后#rili元素后面会多出一个按钮，这里就是设置这个按钮的名字的
buttonImage: "images/calendar.gif", //这里我们也可以给#rili后面的那个按钮设置为一个图片（但是这样的话图片会显示在按钮里，很丑）
buttonImageOnly: true, //设置为true 则会使图片代替按钮。（如果仅仅设置buttonImage图片会显示在按钮里，很丑，这里让它不显示按钮）
yearSuffix: "年",//显示在年后面的文本 例如：在日历的表头会显示2015 四月 那么这里设置yearSuffix: "年",后日历表头就会显示2015年 四月
//如果我想在月的后面也加一个”份“呢？那也很简单，只要在上面那个monthNamesShort属性值的后面加一个份就行了。例如：monthNamesShort:['一月份', '二月份'],
nextText: "下一月", //当鼠标移入日历上的用于选择下一月，或上一页的方向按钮（即像这样的< >的方向按钮）的时候 显示提示文本，即提示：下一页
prevText: "上一月",
showButtonPanel: true, //开启显示按钮面板，只有它开启了，下面那两个“关闭”，和“今天”两个按钮才能显示出来
closeText: '关闭', //将日历添加"关闭"按钮
currentText: '今天', //将日历添加"回到今天"的按钮
yearRange: "1940:2020", //设置下拉菜单年份的区间。比如：1950: 2020 这样用户就可以选择1950年-2020年之间的年份了。
//maxDate: 1,//日历中可以选择的最大日期 例如：今天是5月15日，那么在日历中可以选择的最大日日期就是5月16日，16日后面的所有日期都变成灰色，不能再选择了。如果maxDate: 0日历中可以选择的最大日期就是5月15日了。如果maxDate: 2 日历中可选择的最大日期就是5月17日。以此类推
//minDate: 0 ,//日历中可以选择的最小日期 例如：今天是5月15日，那么在日历中科院选择的最大日期就是5月16日，5月16日之前的所有日期都变成灰色，不能在选择了。 （maxDate和minDate 的值也可以为负值的哦）
showAnim: false, //日历关闭或显示时的特效。它的值有blind，bounce，clip，slide，drop，fold，highlight，puff，scale，pulsate，fadeIn
//设为false表示关闭特效
//----------------------------方法
beforeShow: function () {
//alert("日历打开之前被调用");
},
onClose: function (dateText, inst) { //dateText是当时选中的日期字符串 ，inst 是一个对象（它就是你日历绑定的那个元素的jquery对象）
//alert("日历关闭的时候被调用" + dateText);
/*
for (var i in inst) {
document.write(i + "<br/>")
//通过打印inst这个对象得知他又一下属性或方法
id
input
selectedDay
selectedMonth
selectedYear
drawMonth
drawYear
inline
dpDiv
settings
append
trigger
lastVal
currentDay
currentMonth
currentYear
yearshtml
_keyEvent
}
*/
//alert(inst.id); //获取到绑定日历元素控件的id号 这里打印出：rili
},
onSelect: function (dateText, inst) {//dateText是当时选中的日期字符串 ，inst 是一个对象
// alert("选择日历的日期时被调用");
alert(inst.currentDay); //打印出选中日期的“天” 例如选中5月15日 打印出15
},
//------------------------可以用它来禁用掉一个月份中我不让用户选择的日期。
beforeShowDay: function (date) { //日历显示之前会调用这个方法
//这个date会得到日历的月份，年份，和日期，和周等所有与日期有关的信息
//该方法必须返回一个数组来指定每个日期的信息：
//数组里的第一项：该日期是否可以被选择（数组的第一项，为true 或false）false表示不能被选择
//数组里的第二项：表示该日期单元格上使用的CSS 类 我们可以在css里定义这个单元格的样式
//数组里的第三项：该日期单元格上显示的字符串提示信息
if (date.getDate() == 2) {//如果日期等于1
return [false, 'a', "不能选择1号"] //这里的a是一个class类 ，当鼠标放到日期的1号上就会提示“不能选择1号“
} else {
return[true]
}
}
});
$("#rili").datepicker("setDate", "2013-10-12"); //设置当前的日期为2013-10-12
alert($("#rili").datepicker("getDate"));//获取当前日期。不过它获取到的是Sat Oct 12 2013 00:00:00 GMT+0800 这样的值我们需要用下面的方法来取我们要的
alert($("#rili").datepicker("getDate").getFullYear()); //获取当前日期中的年份
</script>