jquery ui datepicker 自定义设置
一.设置其显示Clear按钮,清除文本框选择的值
$(document).ready(function () {
var datepicker_CurrentInput;
// Set the DatePicker default settings
$.datepicker.setDefaults({
showButtonPanel: true, closeText: '<span style=\'font-weight:normal;color: #aaaaaa;font-family:Arial; font- size: 1em;\'>Clear</span>', beforeShow: function (input, inst) { datepicker_CurrentInput = input; }
});
// Bind "Done" button click event, triggered when the value of Empty text box
$(".ui-datepicker-close").live("click", function () {
datepicker_CurrentInput.value = "";
});
//----------------- end set clear----------------------
$("#admit_date").datepicker({
changeMonth: true,
changeYear: true,
maxDate: 0
});
});
二.设置today 按钮的功能
需要在jquery.ui.datepicker.js的_gotoToday函数加上this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear)); 其中如果加入到最后,会出现点击它不会消失的,应该加在 this._notifyChange(inst);上面。
三.汉化问题
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%)
四.修改外观 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)