论坛首页 Web前端技术论坛

jquery-ui-datepicker的用法讲解

浏览 18448 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-07-22  

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>

 

   发表时间:2010-07-25  
习惯my97datepicker了
0 请登录后投票
   发表时间:2010-07-25  
coffeesweet 写道

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>

 

 

这个太复杂了吧,还是用jquery tools的date组件简单。

只需要加入jquery tools的js文件<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>

或者去http://flowplayer.org/tools/download/index.html定义自己的组件,然后定义一个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部分,在官网上可以找到

效果图如下:


 

  • 大小: 12.1 KB
1 请登录后投票
   发表时间:2010-07-25  
楼上的朋友.datepicker也能这样写.
$("#XX").datepicker({
months:         '一月,二月,三月,四月, 五月,六月,七月,八月,九月,十月,十一月,十二月',
    ****:   '一,二,三,四,五,六,七,八,九,十,十一,十二',
    ****:          '星期一,星期二,星期三,星期四,星期五,星期六,星期日',
    ****:     '一,二,三,四,五,六,日'
});
0 请登录后投票
   发表时间:2010-08-20  
jquery tools的日历控件,官方的css效果是html5,的在我的ie8里面看就是有问题。。。
0 请登录后投票
   发表时间:2010-08-24  
呵呵,不错啊,终于找到喜欢的了!
down了给这个网站用的
http://www.cmker.com
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics