20151221jquery學習筆記---日曆UI

破玉發表於2015-12-21
jQuery筆記UI

妹的，這幾天真是無語了，參加了一個無聊的比賽，簡直浪費時間，好幾天沒學jquery啊，今天學了一點，不過快要期末考試了，估計得攢到寒假了啊。

日曆（datepicker） UI， 可以讓使用者更加直觀的、 更加方便的輸入日期， 並且還考慮不
同國家的語言限制，包括漢語。
一． 呼叫 datepicker()方法

$('#date').datepicker();

　　二． 修改 datepicker()樣式
日曆 UI 的 header 背景和對話方塊 UI 的背景採用的是同一個 class，所以，在此之前已經
被修改。所以，這裡無須再修改了。

//無須修改 ui 裡的 CSS，直接用 style.css 替代掉
.ui-widget-header {
background:url(../img/ui_header_bg.png);
}
//修改當天日期的樣式
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
//修改選定日期的樣式
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;

　　三． datepicker()方法的屬性
日曆方法有兩種形式： 1.datepicker(options)， options 是以物件鍵值對的形式傳參， 每個
鍵值對錶示一個選項； 2.datepicker('action', param)， action 是操作對話方塊方法的字串， param


注意： 預設情況下， 日曆顯示為英文。 如果你想使用中文日曆， 直接引入中文語言包即
可。或者把中文語言包的幾行程式碼整合到某個 js 檔案裡即可。

$('#date').datepicker({
dateFormat : 'yy-mm-dd',
dayNames : ['星期日 ','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort : ['星期日 ','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin : ['日 ','一','二','三','四','五','六'],
monthNames : ['一月 ','二月 ','三月 ','四月 ','五月 ','六月 ','七月 ','八月 ','九月 ','十月 ','十一
月 ','十二月 '],
monthNamesShort : ['一','二','三','四','五','六','七','八','九','十','十一','十二'],
altField : '#abc',
altFormat : 'yy-mm-dd',
appendText : '(yy-mm-dd)',
firstDay : 1,
showWeek : true,
weekHeader : '周',
});

　　

$('#date').datepicker({
disabled : true,
numberOfMonths : [3,2],
showOtherMonths : true,
selectOtherMonths : true,
changeMonth : true,
changeYear : true,
isRTL : true,
autoSize : true,
showButtonPanel: true,
closeText : '關閉',
currentText : '今天',
showMonthAfterYear: true,
});

　　

$('#date').datepicker({
yearRange: '1950:2020',
minDate : -10000,
maxDate : 0, //可以用 new Date(2007,1,1)
defaultDate : -1, //可以用'1m+3'
hideIfNoPrevNext : true,
gotoCurrent : false,
});

　　

$('#date').datepicker({
yearRange: '1950:2020',
showAnim : false,
duration : 300,
});

　　

四． datepicker()方法的事件
除了屬性設定外， datepicker()方法也提供了大量的事件。 這些事件可以給各種不同狀態
時提供回撥函式。 這些回撥函式中的 this 值等於對話方塊內容的 div 物件， 不是整個對話方塊的
div。

$('#date').datepicker({
beforeShow : function () {
alert('日曆顯示之前觸發！ ');
},
beforeShowDay : function (date) {
if(date.getDate() == 1) {
return [false,'a','不能選擇'];
} else {
return [true];
}
},
onChangeMonthYear : function (year,month,inst) {
alert(year);
},
onClose : function (dateText,inst) {
alert(dateText);
},
onSelect : function (dateText,inst) {
alert(dateText);
}
});

　　注意： jQuery UI 只允許使用選項中定義的事件。目前還不可以試用 on()方法來管理。

//顯示日曆
$('#date').datepicker('show');
//隱藏日曆
$('#date').datepicker('hide');
//獲取當前選定日期
alert($('#date').datepicker('getDate').getFullYear());
//設定當前選定日期
$('#date').datepicker('setDate', '2/15/2014');
//刪除日曆
$('#date').datepicker('destroy');
//獲取日曆的 jQuery 物件
$('#date').datepicker('widget');
//重新整理日曆
$('#date').datepicker('refresh');
//獲取是否禁用日曆
alert($('#date').datepicker('isDisabled'));
//獲取屬性的值
alert($('#date').datepicker('option', 'disabled'));
//設定屬性的值
$('#date').datepicker('option', 'disabled', true);

　　

這些教程都是為了方便自己查閱抄寫別人的。。。。



相關文章