这几天开始学习前端技术，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>
  1. jquery-ui.css 是用来配置时间框样式的
  2. jquery-1.4.2.min.js是Jquery JS
  3. 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: 'p_w_picpaths/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>


  1. showOn: 分三种取值：'focus'(default),'button','both'; 'focus'指鼠标点击文本框响应，'button'指点击图片响应，'both'是对这两种都会响应。
  2. dateFormat: 指日期显示的格式。
  3. autoSize:默认为false，文本框是否会动态调整大小。
  4. buttonImage:将button上覆盖一张日历图片
  5. buttonImageOnly:默认为false，是否只显示日历图片
  6. showAnim: 由于IE对某些效果不支持，所以一般就使用fold、fade、slide等
  7. 由于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>

大家可以自己尝试一下效果