欢迎访问 licqi IT技术
我们一直在努力

Datepicker研究

这几天开始学习前端技术,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: ‘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>

  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>

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

赞(0) 打赏
未经允许不得转载:licqi IT技术 » Datepicker研究
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏