jQuery UI插件之datepicker的自定义设置

呼延烈
2023-12-01

1. 修改datepicker的外观颜色,在jquery.ui.theme.css里面修改.ui-widget-header的background的值为你想要的颜色,并且去掉后面到color属性之前的所有内容(主要是url);还要修改.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default的background的值为你想要的颜色,并且去掉后面到color属性之前的所有内容(主要是url)

2. 设置datepicker的外观大小,因为datepicker控件是放在<div id=”ui-datepicker-div></div>里面,所以只需在样式文件里对该div进行如下设置即可# ui-datepicker-div{font-size:62%;}

3. today和done按钮,只有设置showButtonPanel的值为true时,才可以显示today和done按钮面板,但是datepicker控件自带的today按钮的事件是当你的日历面板上没有当前日期的时候,你可以通过today按钮使日历面板直接跳转到当前日期,但是不能将当前日期显示到文本框中,要想将当前日期显示到文本框中,需要在jquery.ui.datepicker.js的_gotoToday函数最后加上this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));即可;datepicker自带的done按钮其实是关闭日历面板,可以通过$(".ui-datepicker-close").live("click", function() {datepicker_CurrentInput.value = ""; });实现清除文本框内所填日期;datepicker自带的这两个按钮,默认文本是today和done,我们可以通过设置datepicker的currentText: "今天",和closeText: "清除",改变这两个按钮的显示文本

4. 汉化问题,datepicker有一个汉化的js文件,只要在用到datepicker控件的页面引入该文件即可汉化datepicker控件的显示文字。但是汉化会带来一个问题,就是如果datepicker控件的changeMonth和changeYear属性设置为true的话,汉化后的年和月会显示在两行里,很难看,这是我们需要修改jquery.ui.datepicker.css里面的.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%;}(默认的width是49%)

5. 如果没有清空上一次选择的日期,刷新页面时,文本框里会保留上一次的日期,要想在重新加载页面的时候清除上一次所选的日期,可以通过以下方式实现:$(#datepicker1”).attr(value,””);

给属性赋值:attr(属性,属性值);

获取属性的值:attr(属性);

 类似资料: