datepicker 实例-CSDN博客

<!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>