datepicker 实例
仲孙默
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
</style>
<script>
$(function() {
$('#datepicker').datepicker({
numberOfMonths:2,
showCurrentAtPos:1,
showButtonPanel:true,
showOn:'both',
buttonText:'选择',
changeMonth:true,
changeYear:true,
yearRange:'-3:+20',
dayNamesMin:['日','a','b','c','d','e','f'],
monthNames:['一月','2','3','4','5','6','七月','八','九','十月','十一月','十二月'],
defaultDate:+10,
showAnim:'fold',
dateFormat:'yy-mm-dd',
showOtherMonths:true,
beforeShow: function(input) {
$("button").append(" <b>ooo</b>");
$(" <span>啊啊</span>").appendTo($("button"));
},
beforeShowDay: function(date) { $("button").append(" <b>Hello jQuery!</b> "); }
});
$("#date").datepicker({
numberOfMonths : 4,
showCurrentAtPos: 1 ,//设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位
showButtonPanel : true,
//closeText: 'X' ,//设置关闭按钮的文本内容
//minDate : 0,
//altField: '#actualDate' ,
showOn: 'both' ,//'focus', 'button', 'both'
buttonText: 'Choose' ,
// altFormat: 'yy-mm-dd' ,
// appendText: '(yyyy-mm-dd)' ,
changeYear: true ,//设置允许通过下拉框列表选取年份
// changeMonth: true,//设置允许通过下拉框列表选取月份。
// constrainInput: true ,//如果设置为true，则约束当前输入的日期格式。
// currentText: '今天' ,//设置当天按钮的文本内容
// dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] ,
// dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] ,//设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
//dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] ,//设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。
//monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'],
monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
defaultDate: +7,//设置默认加载完后第一次显示时选中的日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
duration: 'slow' ,//设置日期控件展开动画的显示时间，可选是"slow", "normal", "fast"，''代表立刻，数字代表毫秒数。
firstDay: 4,//设置一周中的第一天。星期天为0，星期一为1，
//gotoCurrent: true ,//如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天
//hideIfNoPrevNext: true ,//设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）
//isRTL: true ,//如果设置为true，则所有文字是从右自左。
//maxDate: '+1m +1w',//设置一个最大的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
//minDate: new Date(2015, 5 - 1, 13), //设置一个最小的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
//navigationAsDateFormat: true ,//如果设置为true，则formatDate函数将应用到 prevText,nextText和currentText的值中显示，例如显示为月份名称。
nextText: 'Later' ,
prevText: 'Earlier' ,
// shortYearCutoff: 3 ,//设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加。当超过截止年份时，则被认为是上个世纪。
showAnim: 'show' ,//'fold' ,'show'设置显示、隐藏日期插件的动画的名称。
showOptions: {direction: 'down' },
showMonthAfterYear: true ,//是否在面板的头部年份后面显示月份。
showOtherMonths: true ,//是否在当前面板显示上、下两个月的一些日期数（不可选）。
// stepMonths: 7,//当点击上/下一月时，一次翻几个月。
yearRange: '-4:+10' ,//'-10:+10', '2000:2010' 控制年份的下拉列表中显示的年份数量
dateFormat : 'yy-mm-dd',
beforeShow: function(input) { alert("beforeShow") }
}).click(function() {
//$.index.AddNL();
//alert("ds");
}).focus(function() {
//alert("111");
//$.index.AddNL();
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<p>Date: <input type="text" id="date"></p>
</body>
</html>
类似资料：