这几天开始学习前端技术，JS也一点点的接触。由于对Jquery比较感兴趣，所以在弄时间框的时候，学些了一下Jquery的Datepicker。自己整理到这里。
DatePicker需要至少3个文件
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
jquery-ui.css 是用来配置时间框样式的
jquery-1.4.2.min.js是Jquery JS
jquery-ui.min.js是Jquery的UI扩展
在body块中添加一个input标签<body>
<div type="text" id="datepicker">
<input type="text" id="altField" readonly="true" >
</div>
</body>在页面加载完成后调用datepicker方法
<script>
$(function(){$('#altField').datepicker({showOn: 'both',dateFormat: 'yy-mm-dd',autoSize: true, buttonImage: 'images/calendar.gif',buttonImageOnly: true, currentText: '今日',buttonText: 'Choose Date',dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],dayNamesMin: ['日','一','二','三','四','五','六'], monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],showAnim: 'fold',showOtherMonths: true,selectOtherMonths: true,showWeek: true,weekHeader: '周数',changeMonth: false,changeYear: false,showMonthAfterYear: true,prevText: '上一月',nextText: '下一月'});var date = new Date();$('#altField').val((new Date()).format('yyyy-mm-dd'));});
</script>
showOn: 分三种取值：'focus'(default),'button','both'; 'focus'指鼠标点击文本框响应，'button'指点击图片响应，'both'是对这两种都会响应。
dateFormat: 指日期显示的格式。
autoSize:默认为false，文本框是否会动态调整大小。
buttonImage:将button上覆盖一张日历图片
buttonImageOnly:默认为false，是否只显示日历图片
showAnim: 由于IE对某些效果不支持，所以一般就使用fold、fade、slide等
由于IE某些Css不太兼容，需要对css做一些修改。具体如下：
<style="text/css">
.ui-datepicker { font-size: 60%; width: 17em; padding: .2em .2em 0; }
.ui-datepicker-other-month { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
</style>
详细请看Jquery Datepicker文档http://docs.jquery.com/UI/Datepicker
另外由于在页面初始化的时候，文本框不能默认填写当日日期。所以我在onload函数中添加了
var date = new Date();$('#altField').val((new Date()).format('yyyy-mm-dd'));
Date对象的format函数为我自己添加的。
<script>
Date.prototype.format = function(format)
{
var o =
{
"m+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"M+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format))
format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
</script>
大家可以自己尝试一下效果