jquery-ui-datepicker的用法讲解

最新推荐文章于 2025-09-07 14:08:17 发布

最新推荐文章于 2025-09-07 14:08:17 发布 · 218 阅读

标签

#UI #jQuery #HTML5 #JavaScript #CSS

JS CSS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在页面中正确引入并配置jQuery UI Datepicker插件，包括JS文件的引入顺序、语言包的选择及设置、以及如何通过代码初始化日期选择器的各项属性。

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>