jquery-ui-datepicker的用法讲解

coffeesweet

浏览: 414666 次
性别:
来自: 北京

最近访客更多访客>>

康敏栋

沉默的水

ptkr

xubukang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS CSS

UI jQuery HTML5 JavaScript CSS

1:先在页面引入相关的js,注意引入顺序不能错

jquery-1.4.2.min.js

jquery-ui.min.js

jquery.ui.datepicker.min.js

jquery.ui.datepicker-zh-CN.min.js

jquery.ui.datepicker-fr.min.js

....等等语言包(用到哪些加入哪些)

注意:在语言包的最后一句话设置了该datepicker的缺省Localization

类似这句：setDefaults(....regional[...])

所以页面的datepicker如果不再自己设置的话，缺省会以最后一个引入的语言包的Localization为准.

2:页面示例

其中的注释已经很清楚了,datepicker的官方文档对于option的设置是先init datepicker,再setter or getter

<html>
<head>
<script type="text/javascript">
		$(function() {
			//$("#datepicker").datepicker(...);//代表带着...属性直接执行创建datepicker()
			//必须先init datepicker才能再设置datepicker的option
			//$("#datepicker").datepicker('option',...,...);//代表设置datepicker的...的属性值为...,但不执行创建datepicker();
			
			//$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
			
			$.datepicker.setDefaults($.datepicker.regional['']);//先清理一下语言包的regional
			$("#datepicker").datepicker();
			$("#datepicker").datepicker('option', $.datepicker.regional['zh-CN']);
			//$("#datepicker").datepicker($.datepicker.regional['zh-CN']);//该句执行失效，因为之前有$("#datepicker").datepicker();了
			$("#datepicker").datepicker('option', 'dateFormat','yy-mm-dd');//set dateFormat
			//var dateFormat = $( "#datepicker" ).datepicker( "option", "dateFormat" );//get dateFormat
			//$("#datepicker").datepicker('option', {dateFormat: 'yy-mm-dd'});//set dateFormat
		});
</script>
</head>
<body>
<!--div id="datepicker"></div-->
 <input id="datepicker" type="text"/>
</body>
</html>

分享到：

jqGrid-struts2的使用详解 | Ibator支持分页的plugin

2010-07-22 10:12
浏览 11477
评论(4)
论坛回复 / 浏览 (5 / 18448)
分类:Web前端
查看更多

4 楼 spiritfrog 2010-08-20

jquery tools的日历控件，官方的css效果是html5，的在我的ie8里面看就是有问题。。。

3 楼 JiongBull 2010-07-25

楼上的朋友.datepicker也能这样写.
$("#XX").datepicker({
months:         '一月,二月,三月,四月, 五月,六月,七月,八月,九月,十月,十一月,十二月',
    ****:   '一,二,三,四,五,六,七,八,九,十,十一,十二',
    ****:          '星期一,星期二,星期三,星期四,星期五,星期六,星期日',
    ****:     '一,二,三,四,五,六,日'
});

2 楼 cheneyjuu 2010-07-25

<div class="quote_title">coffeesweet 写道</div>
<div class="quote_div">
1:先在页面引入相关的js,注意引入顺序不能错
 
jquery-1.4.2.min.js
jquery-ui.min.js
jquery.ui.datepicker.min.js
jquery.ui.datepicker-zh-CN.min.js
jquery.ui.datepicker-fr.min.js
....等等语言包(用到哪些加入哪些)
注意:在语言包的最后一句话设置了该datepicker的缺省Localization
类似这句：setDefaults(....regional[...])
所以页面的datepicker如果不再自己设置的话，缺省会以最后一个引入的语言包的Localization为准.
 
2:页面示例
 
其中的注释已经很清楚了,datepicker的官方文档对于option的设置是先init datepicker,再setter or getter
 
<pre name="code" class="html"><html>
<head>
<script type="text/javascript">
$(function() {
//$("#datepicker").datepicker(...);//代表带着...属性直接执行创建datepicker()
//必须先init datepicker才能再设置datepicker的option
//$("#datepicker").datepicker('option',...,...);//代表设置datepicker的...的属性值为...,但不执行创建datepicker();

//$.datepicker.setDefaults($.datepicker.regional['zh-CN']);

$.datepicker.setDefaults($.datepicker.regional['']);//先清理一下语言包的regional
$("#datepicker").datepicker();
$("#datepicker").datepicker('option', $.datepicker.regional['zh-CN']);
//$("#datepicker").datepicker($.datepicker.regional['zh-CN']);//该句执行失效，因为之前有$("#datepicker").datepicker();了
$("#datepicker").datepicker('option', 'dateFormat','yy-mm-dd');//set dateFormat
//var dateFormat = $( "#datepicker" ).datepicker( "option", "dateFormat" );//get dateFormat
//$("#datepicker").datepicker('option', {dateFormat: 'yy-mm-dd'});//set dateFormat
});
</script>
</head>
<body>

<input id="datepicker" type="text"/>
</body>
</html></pre>
 
 
这个太复杂了吧，还是用jquery tools的date组件简单。
只需要加入jquery tools的js文件<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
或者去<a href="http://flowplayer.org/tools/download/index.html">http://flowplayer.org/tools/download/index.html</a>定义自己的组件，然后定义一个type为date类型的input：
<input type="date" name="createTime" />，在这个input下面加上js调用：


<script>
$.tools.dateinput.localize("zh_cn", {
 months: '一月,二月,三月,四月, 五月,六月,七月,八月,九月,十月,十一月,十二月',
 shortMonths: '一,二,三,四,五,六,七,八,九,十,十一,十二',
 days: '星期一,星期二,星期三,星期四,星期五,星期六,星期日',
 shortDays: '一,二,三,四,五,六,日'
 });
$(":date").dateinput({lang: 'zh_cn', format: 'yyyy-mm-dd',selectors: true});
</script>
红色的为必须部分，灰色的部分，是我自定义的中文(默认不支持中文，需要自己定义)。
关于css部分，在官网上可以找到
效果图如下：
 <img src="http://dl.iteye.com/upload/attachment/282785/6651bc97-a719-3683-94c2-6942d4398e22.jpg" alt="">

</div>

1 楼 jitabc 2010-07-25

习惯my97datepicker了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论