jquery 日历使用方法

<link href="css/back/jquery-ui-1.7.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
时间：<input type="text" class="dp_date" name="publishTime" id="datepicker"/></td>
            <script type="text/javascript">
                $(document).ready(function(){
                    $(function() {
                        $("#datepicker").datepicker({
                            dateFormat:'yy-mm-dd', 
                            changeMonth : true,
                            changeYear : true
                            });
                    });
                });
            </script>

 

001	altField : String : ''

002	将选择的日期同步到另一个域中，配合altFormat可以显示不同格式的日期字符串。

003	初始：$( '.selector' ).datepicker({ altField: '#actualDate' });

004	获取： var altField = $( '.selector' ).datepicker( 'option' , 'altField' );

005	设置：$( '.selector' ).datepicker( 'option' , 'altField' , '#actualDate' );

006

007	altFormat : String : ''

008	当设置了altField的情况下，显示在另一个域中的日期格式。

009	初始：$( '.selector' ).datepicker({ altFormat: 'yy-mm-dd' });

010	获取： var altFormat = $( '.selector' ).datepicker( 'option' , 'altFormat' );

011	设置：$( '.selector' ).datepicker( 'option' , 'altFormat' , 'yy-mm-dd' );

012

013	appendText : String : ''

014	在日期插件的所属域后面添加指定的字符串。

015	初始：$( '.selector' ).datepicker({ appendText: '(yyyy-mm-dd)' });

016	获取： var appendText = $( '.selector' ).datepicker( 'option' , 'appendText' );

017	设置：$( '.selector' ).datepicker( 'option' , 'appendText' , '(yyyy-mm-dd)' );

018

019	buttonImage : String : ''

020	设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。

021	初始：$( '.selector' ).datepicker({ buttonImage: '/images/datepicker.gif' });

022	获取： var buttonImage = $( '.selector' ).datepicker( 'option' , 'buttonImage' );

023	设置：$( '.selector' ).datepicker( 'option' , 'buttonImage' , '/images/datepicker.gif' );

024

025	buttonImageOnly : Boolean : false

026	Set to true to place an image after the field to use as the trigger without it appearing on a button.

027	初始：$( '.selector' ).datepicker({ buttonImageOnly: true });

028	获取： var buttonImageOnly = $( '.selector' ).datepicker( 'option' , 'buttonImageOnly' );

029	设置：$( '.selector' ).datepicker( 'option' , 'buttonImageOnly' , true);

030

031	buttonText : String : '...'

032	设置触发按钮的文本内容。

033	初始：$( '.selector' ).datepicker({ buttonText: 'Choose' });

034	获取： var buttonText = $( '.selector' ).datepicker( 'option' , 'buttonText' );

035	设置：$( '.selector' ).datepicker( 'option' , 'buttonText' , 'Choose' );

036

037	changeMonth : Boolean : false

038	设置允许通过下拉框列表选取月份。

039	初始：$( '.selector' ).datepicker({ changeMonth: true });

040	获取： var changeMonth = $( '.selector' ).datepicker( 'option' , 'changeMonth' );

041	设置：$( '.selector' ).datepicker( 'option' , 'changeMonth' , true);

042

043	changeYear : Boolean : false

044	设置允许通过下拉框列表选取年份。

045	初始：$( '.selector' ).datepicker({ changeYear: true });

046	获取： var changeYear = $( '.selector' ).datepicker( 'option' , 'changeYear' );

047	设置：$( '.selector' ).datepicker( 'option' , 'changeYear' , true);

048

049	closeTextType: StringDefault: 'Done'

050	设置关闭按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。

051	初始：$( '.selector' ).datepicker({ closeText: 'X' });

052	获取： var closeText = $( '.selector' ).datepicker( 'option' , 'closeText' );

053	设置：$( '.selector' ).datepicker( 'option' , 'closeText' , 'X' );

054

055	constrainInput : Boolean : true

056	如果设置为true，则约束当前输入的日期格式。

057	初始：$( '.selector' ).datepicker({ constrainInput: false });

058	获取： var constrainInput = $( '.selector' ).datepicker( 'option' , 'constrainInput' );

059	设置：$( '.selector' ).datepicker( 'option' , 'constrainInput' , false);

060

061	currentText : String : 'Today'

062	设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。

063	初始：$( '.selector' ).datepicker({ currentText: 'Now' });

064	获取： var currentText = $( '.selector' ).datepicker( 'option' , 'currentText' );

065	设置：$( '.selector' ).datepicker( 'option' , 'currentText' , 'Now' );

066

067	dateFormat : String : 'mm/dd/yy'

068	设置日期字符串的显示格式。

069	初始：$( '.selector' ).datepicker({ dateFormat: 'yy-mm-dd' });

070	获取： var dateFormat = $( '.selector' ).datepicker( 'option' , 'dateFormat' );

071	设置：$( '.selector' ).datepicker( 'option' , 'dateFormat' , 'yy-mm-dd' );

072

073	dayNames : Array : [ 'Sunday' , 'Monday' , 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' ]

074	设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。

075	初始：$( '.selector' ).datepicker({ dayNames: [ 'Dimanche' , 'Lundi' , 'Mardi' , 'Mercredi' , 'Jeudi' , 'Vendredi' , 'Samedi' ] });

076	获取： var dayNames = $( '.selector' ).datepicker( 'option' , 'dayNames' );

077	设置：$( '.selector' ).datepicker( 'option' , 'dayNames' , [ 'Dimanche' , 'Lundi' , 'Mardi' , 'Mercredi' , 'Jeudi' , 'Vendredi' , 'Samedi' ]);

078

079	dayNamesMin : Array : [ 'Su' , 'Mo' , 'Tu' , 'We' , 'Th' , 'Fr' , 'Sa' ]

080	设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。

081	初始：$( '.selector' ).datepicker({ dayNamesMin: [ 'Di' , 'Lu' , 'Ma' , 'Me' , 'Je' , 'Ve' , 'Sa' ] });

082	获取： var dayNamesMin = $( '.selector' ).datepicker( 'option' , 'dayNamesMin' );

083	设置：$( '.selector' ).datepicker( 'option' , 'dayNamesMin' , [ 'Di' , 'Lu' , 'Ma' , 'Me' , 'Je' , 'Ve' , 'Sa' ]);

084

085	dayNamesShort : Array : [ 'Sun' , 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' ]

086	设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。

087	初始：$( '.selector' ).datepicker({ dayNamesShort: [ 'Dim' , 'Lun' , 'Mar' , 'Mer' , 'Jeu' , 'Ven' , 'Sam' ] });

088	获取： var dayNamesShort = $( '.selector' ).datepicker( 'option' , 'dayNamesShort' );

089	设置：$( '.selector' ).datepicker( 'option' , 'dayNamesShort' , [ 'Dim' , 'Lun' , 'Mar' , 'Mer' , 'Jeu' , 'Ven' , 'Sam' ]);

090

091	defaultDate : Date , Number, String : null

092	设置默认加载完后第一次显示时选中的日期。可以是 Date 对象，或者是数字（从今天算起，例如+7），或者有效的字符串( 'y' 代表年, 'm' 代表月, 'w' 代表周, 'd' 代表日, 例如： '+1m +7d' )。

093	初始：$( '.selector' ).datepicker({ defaultDate: +7 });

094	获取： var defaultDate = $( '.selector' ).datepicker( 'option' , 'defaultDate' );

095	设置：$( '.selector' ).datepicker( 'option' , 'defaultDate' , +7);

096

097	duration : String, Number : 'normal'

098	设置日期控件展开动画的显示时间，可选是 "slow" , "normal" , "fast" ， '' 代表立刻，数字代表毫秒数。

099	初始：$( '.selector' ).datepicker({ duration: 'slow' });

100	获取： var duration = $( '.selector' ).datepicker( 'option' , 'duration' );

101	设置：$( '.selector' ).datepicker( 'option' , 'duration' , 'slow' );

102

103	firstDay : Number : 0

104	设置一周中的第一天。星期天为0，星期一为1，以此类推。

105	初始：$( '.selector' ).datepicker({ firstDay: 1 });

106	获取： var firstDay = $( '.selector' ).datepicker( 'option' , 'firstDay' );

107	设置：$( '.selector' ).datepicker( 'option' , 'firstDay' , 1);

108

109	gotoCurrent : Boolean : false

110	如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。

111	初始：$( '.selector' ).datepicker({ gotoCurrent: true });

112	获取： var gotoCurrent = $( '.selector' ).datepicker( 'option' , 'gotoCurrent' );

113	设置：$( '.selector' ).datepicker( 'option' , 'gotoCurrent' , true);

114

115	hideIfNoPrevNext : Boolean : false

116	设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）

117	初始：$( '.selector' ).datepicker({ hideIfNoPrevNext: true });

118	获取： var hideIfNoPrevNext = $( '.selector' ).datepicker( 'option' , 'hideIfNoPrevNext' );

119	设置：$( '.selector' ).datepicker( 'option' , 'hideIfNoPrevNext' , true);

120

121	isRTL : Boolean : false

122	如果设置为true，则所有文字是从右自左。

123	初始：$( '.selector' ).datepicker({ isRTL: true });

124	获取： var isRTL = $( '.selector' ).datepicker( 'option' , 'isRTL' );

125	设置：$( '.selector' ).datepicker( 'option' , 'isRTL' , true);

126

127	maxDate : Date , Number, String : null

128	设置一个最大的可选日期。可以是 Date 对象，或者是数字（从今天算起，例如+7），或者有效的字符串( 'y' 代表年, 'm' 代表月, 'w' 代表周, 'd' 代表日, 例如： '+1m +7d' )。

129	初始：$( '.selector' ).datepicker({ maxDate: '+1m +1w' });

130	获取： var maxDate = $( '.selector' ).datepicker( 'option' , 'maxDate' );

131	设置：$( '.selector' ).datepicker( 'option' , 'maxDate' , '+1m +1w' );

132	$( '.selector' ).datepicker( 'option' , 'maxDate' , '12/25/2012' );

133

134	minDate : Date , Number, String : null

135	设置一个最小的可选日期。可以是 Date 对象，或者是数字（从今天算起，例如+7），或者有效的字符串( 'y' 代表年, 'm' 代表月, 'w' 代表周, 'd' 代表日, 例如： '+1m +7d' )。

136	初始：$( '.selector' ).datepicker({ minDate: new Date (2007, 1 - 1, 1) });

137	获取： var minDate = $( '.selector' ).datepicker( 'option' , 'minDate' );

138	设置：$( '.selector' ).datepicker( 'option' , 'minDate' , new Date (2007, 1 - 1, 1));

139	$( '.selector' ).datepicker( 'option' , 'minDate' , '12/25/2012' );

140

141	monthNames : Array : [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'December' ]

142	设置所有月份的名称。

143	初始：$( '.selector' ).datepicker(｛monthNames:[ 'Januar' , 'Februar' , 'Marts' , 'April' , 'Maj' , 'Juni' , 'Juli' , 'August' , 'September' , 'Oktober' , 'November' , 'December' ]});

144	获取： var monthNames = $( '.selector' ).datepicker( 'option' , 'monthNames' );

145	设置：$( '.selector' ).datepicker( 'option' , 'monthNames' , [ 'Januar' , 'Februar' , 'Marts' , 'April' , 'Maj' , 'Juni' , 'Juli' , 'August' , 'September' , 'Oktober' , 'November' , 'December' ]);

146

147	monthNamesShort : Array : [ 'Jan' , 'Feb' , 'Mar' , 'Apr' , 'May' , 'Jun' , 'Jul' , 'Aug' , 'Sep' , 'Oct' , 'Nov' , 'Dec' ]

148	设置所有月份的缩写。

149	初始：$( '.selector' ).datepicker(｛monthNamesShort:[ 'Jan' , 'Feb' , 'Mar' , 'Apr' , 'Maj' , 'Jun' , 'Jul' , 'Aug' , 'Sep' , 'Okt' , 'Nov' , 'Dec' ]});

150	获取： var monthNamesShort = $( '.selector' ).datepicker( 'option' , 'monthNamesShort' );

151	设置：$( '.selector' ).datepicker( 'option' , 'monthNamesShort' , [ 'Jan' , 'Feb' , 'Mar' , 'Apr' , 'Maj' , 'Jun' , 'Jul' , 'Aug' , 'Sep' , 'Okt' , 'Nov' , 'Dec' ]);

152

153	navigationAsDateFormat : Boolean : false

154	如果设置为true，则formatDate函数将应用到 prevText,nextText和currentText的值中显示，例如显示为月份名称。

155	初始：$( '.selector' ).datepicker({ navigationAsDateFormat: true });

156	获取： var navigationAsDateFormat = $( '.selector' ).datepicker( 'option' , 'navigationAsDateFormat' );

157	设置：$( '.selector' ).datepicker( 'option' , 'navigationAsDateFormat' , true);

158

159	nextText : String : 'Next'

160	设置“下个月”链接的显示文字。

161	初始：$( '.selector' ).datepicker({ nextText: 'Later' });

162	获取： var nextText = $( '.selector' ).datepicker( 'option' , 'nextText' );

163	设置：$( '.selector' ).datepicker( 'option' , 'nextText' , 'Later' );

164

165	numberOfMonths : Number, Array : 1

166	设置一次要显示多少个月份。如果为整数则是显示月份的数量，如果是数组，则是显示的行与列的数量。

167	初始：$( '.selector' ).datepicker({ numberOfMonths: [2, 3] });

168	获取： var numberOfMonths = $( '.selector' ).datepicker( 'option' , 'numberOfMonths' );

169	设置：$( '.selector' ).datepicker( 'option' , 'numberOfMonths' , [2, 3]);

170

171	prevText : String : 'Prev'

172	设置“上个月”链接的显示文字。

173	初始：$( '.selector' ).datepicker({ prevText: 'Earlier' });

174	获取： var prevText = $( '.selector' ).datepicker( 'option' , 'prevText' );

175	设置：$( '.selector' ).datepicker( 'option' , 'prevText' , 'Earlier' );

176

177	shortYearCutoff : String, Number : '+10'

178	设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加。当超过截止年份时，则被认为是上个世纪。

179	初始：$( '.selector' ).datepicker({ shortYearCutoff: 50 });

180	获取： var shortYearCutoff = $( '.selector' ).datepicker( 'option' , 'shortYearCutoff' );

181	设置：$( '.selector' ).datepicker( 'option' , 'shortYearCutoff' , 50);

182

183	showAnim : String : 'show'

184	设置显示、隐藏日期插件的动画的名称。

185	初始：$( '.selector' ).datepicker({ showAnim: 'fold' });

186	获取： var showAnim = $( '.selector' ).datepicker( 'option' , 'showAnim' );

187	设置：$( '.selector' ).datepicker( 'option' , 'showAnim' , 'fold' );

188

189	showButtonPanel : Boolean : false

190	设置是否在面板上显示相关的按钮。

191	初始：$( '.selector' ).datepicker({ showButtonPanel: true });

192	获取： var showButtonPanel = $( '.selector' ).datepicker( 'option' , 'showButtonPanel' );

193	设置：$( '.selector' ).datepicker( 'option' , 'showButtonPanel' , true);

194

195	showCurrentAtPos : Number : 0

196	设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。

197	初始：$( '.selector' ).datepicker({ showCurrentAtPos: 3 });

198	获取： var showCurrentAtPos = $( '.selector' ).datepicker( 'option' , 'showCurrentAtPos' );

199	设置：$( '.selector' ).datepicker( 'option' , 'showCurrentAtPos' , 3);

200

201	showMonthAfterYear : Boolean : false

202	是否在面板的头部年份后面显示月份。

203	初始：$( '.selector' ).datepicker({ showMonthAfterYear: true });

204	获取： var showMonthAfterYear = $( '.selector' ).datepicker( 'option' , 'showMonthAfterYear' );

205	设置：$( '.selector' ).datepicker( 'option' , 'showMonthAfterYear' , true);

206

207	showOn : String : 'focus'

208	设置什么事件触发显示日期插件的面板，可选值：focus, button, both

209	初始：$( '.selector' ).datepicker({ showOn: 'both' });

210	获取： var showOn = $( '.selector' ).datepicker( 'option' , 'showOn' );

211	设置：$( '.selector' ).datepicker( 'option' , 'showOn' , 'both' );

212

213	showOptions : Options : {}

214	如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。

215	初始：$( '.selector' ).datepicker({ showOptions: {direction: 'up' });

216	获取： var showOptions = $( '.selector' ).datepicker( 'option' , 'showOptions' );

217	设置：$( '.selector' ).datepicker( 'option' , 'showOptions' , {direction: 'up' );

218

219	showOtherMonths : Boolean : false

220	是否在当前面板显示上、下两个月的一些日期数（不可选）。

221	初始：$( '.selector' ).datepicker({ showOtherMonths: true });

222	获取： var showOtherMonths = $( '.selector' ).datepicker( 'option' , 'showOtherMonths' );

223	设置：$( '.selector' ).datepicker( 'option' , 'showOtherMonths' , true);

224

225	stepMonths : Number : 1

226	当点击上/下一月时，一次翻几个月。

227	初始：$( '.selector' ).datepicker({ stepMonths: 3 });

228	获取： var stepMonths = $( '.selector' ).datepicker( 'option' , 'stepMonths' );

229	设置：$( '.selector' ).datepicker( 'option' , 'stepMonths' , 3);

230

231	yearRange : String : '-10:+10'

232	控制年份的下拉列表中显示的年份数量，可以是相对当前年(-nn:+nn)，也可以是绝对值 (-nnnn:+nnnn)

233	初始：$( '.selector' ).datepicker({ yearRange: '2000:2010' });

234	获取： var yearRange = $( '.selector' ).datepicker( 'option' , 'yearRange' );

235	设置：$( '.selector' ).datepicker( 'option' , 'yearRange' , '2000:2010' );

事件

查看源代码 打印 帮助

01	beforeShow : function (input)

02	在日期控件显示面板之前，触发此事件，并返回当前触发事件的控件的实例对象。

03	初始：$( '.selector' ).datepicker({ beforeShow: function (input) { ... } });

04

05	beforeShowDay : function ( date )

06	在日期控件显示面板之前，每个面板上的日期绑定时都触发此事件，参数为触发事件的日期。调用函数后，必须返回一个数组：[0]此日期是否可选(true/false)，[1]此日期的CSS样式名称( "" 表示默认)，[2]当鼠标移至上面出现一段提示的内容。

07	初始：$( '.selector' ).datepicker({ beforeShowDay: function ( date ) { ... } });

08

09	onChangeMonthYear : function (year, month, inst)

10	当年份或月份改变时触发此事件，参数为改变后的年份月份和当前日期插件的实例。

11	初始：$( '.selector' ).datepicker({ onChangeMonthYear: function (year, month, inst) { ... } });

12

13	onClose : function (dateText, inst)

14	当日期面板关闭后触发此事件（无论是否有选择日期），参数为选择的日期和当前日期插件的实例。

15	初始：$( '.selector' ).datepicker({ onClose: function (dateText, inst) { ... } });

16

17	onSelect : function (dateText, inst)

18	当在日期面板选中一个日期后触发此事件，参数为选择的日期和当前日期插件的实例。

19

$( '.selector' ).datepicker({ onSelect: function (dateText, inst) { ... } });               01 destory 02    从元素中移除拖拽功能。 03    用法：.datepicker( 'destroy' )  04   05 disable 06    禁用元素的拖拽功能。 07    用法：.datepicker( 'disable' )  08   09 enable 10    启用元素的拖拽功能。 11    用法：.datepicker( 'enable' )  12   13 option 14    获取或设置元素的参数。 15    用法：.datepicker( 'option' , optionName , [value] )  16   17 dialog 18    在dialog插件中打开一个日期插件。 19    用法：.datepicker( 'dialog' , dateText , [onSelect] , [settings] , [pos] )  20   21 isDisabled 22    确实日期插件是否已被禁用。 23    用法：.datepicker( 'isDisabled' )  24   25 hide 26    隐藏（关闭）之前已经打开的日期面板。 27    用法：.datepicker( 'hide' , [speed] )   28   29 show 30 .datepicker( 'show' ) 31    显示日期插件。 32    用法：.datepicker( 'show' )  33   34 getDate 35    返回当前日期插件选择的日期。 36    用法：.datepicker( 'getDate' )  37   38 setDate 39    设置日期插件当前的日期。 date 参数可以是数字（从今天算起，例如+7），或者有效的字符串( 'y' 代表年, 'm' 代表月, 'w' 代表周, 'd' 代表日, 例如： '+1m +7d' )，null表示当天。 40    用法：.datepicker( 'setDate' , date )