jQuery外掛程式之日曆外掛程式

2021-06-05 08:24:13 字數 1676 閱讀 3303

在頁面開發中,經常遇到需要使用者輸入日期的操作。通常的做法是,提供乙個文字框(text),讓使用者輸入,然後,編寫**驗證輸入的資料,檢測其是否是日期型別。這樣比較麻煩,同時,使用者輸入日期的操作也不是很方便,影響使用者體驗。如果使用jquery ui中的datepicker(日曆)外掛程式,這些問題都可以迎刃而解。該外掛程式呼叫的語法格式如下:

$(「.selector」).datepicker(options);

其中」.selector」表示dom元素,一般指文字框,由於該外掛程式的作用是提供日期選擇,因此常與乙個文字框繫結,將選擇後的日期顯示在該文字框中,選擇options是乙個物件與前面外掛程式中的options一樣,通過改變其引數對應的值,從而實現外掛程式功能的變化,在datepicker外掛程式中,選擇options常用引數如下

1、changemonth 設定乙個布林值,如果wietrue,則可以在標題處出現乙個下拉選擇框,可以選擇月份,預設值為false

2、changeyear 設定乙個布林值,如果為true,則可以在標題處出現乙個下拉選擇框,可以選擇年份,預設為false

3、showbuttonpanel 設定乙個布林值,如果為true,則在日期的下面顯示乙個面板,其中有兩個按鈕;乙個為「今天」,另乙個按鈕為「關閉」,預設值為false,表示不顯示

4、closetext 設定關閉按鈕上的文字資訊,這項設定的前提是,showbuttonpanel的值必須為true,否則顯示不了效果

5、dateformat 設定顯示在文字框(text)中的日期格式,可設定為,表示日期的格式為年-月-日,如2012-10-1

6、defaultdate 設定乙個預設日期值,如,表示,彈出日期選擇視窗後,預設的日期是在當前日期上加上7天

7、showanim 設定顯示彈出或隱藏日期選擇視窗的方式。可以設定的方式有,「show」、「sildedown」、「fadeln」後者「」,表示沒有彈出日期選擇視窗的方式

8、showweek 設定乙個布林值,如果為true,則可以顯示每天對應的星期,預設值為false

9、yearrange 設定年份的範圍

日曆例項**:實現**//當頁面載入完畢時觸發該匿名函式

$(document).ready(function(),

prevtext:"上個月",

nexttext:"下個月",//上下月按鈕的提示

showon:"button",//在文字框後面新增乙個按鈕

// buttontext:"選擇日期"

buttonimage:" images/calendar.gif",

buttonimageonly:true, //本身是乙個按鈕,加上這句話之後就會只顯示

showothermonths:true,//當前月的日期 也包含其他月份的日期

selectothermonths:false //不是當前月的日期是否可選 預設值是false不可選

});});

使用外掛程式實現分段日期的選擇還可以用下面的方法,不過相比較來說比較麻煩

//設定開始日期

$("#db").datepicker(

});//設定結束日期

$("#end").datepicker(

});body中的內容:

外掛程式框架4 核心外掛程式之日誌外掛程式

功能需求 能夠擴充套件日誌輸出類別 預設包含檔案輸出 能夠自定義訊息屬性 預設三類訊息級別 提供簡單的日誌輸出格式,可能有數字,文字的混合 方案 定義乙個日誌輸出類別基類 日誌主外掛程式需要主要去載入所有擴充套件輸出類別外掛程式 日誌主外掛程式只提供文字 數字的簡單輸出,對於復合輸出完全可以用str...

簽到日曆外掛程式

1 html 2 css ul,libody.checkin.clear clearfix after clearfix for ie6 ie7 title.title p.title a.checkin lili.able qiandaoli.checked.mask.modala.closebt...

fullCalendar 日曆外掛程式

div id calendar div 初始化fullcalendar var calendar calendar fullcalendar 日曆高度,包括表頭 height 850,標題格式化 titleformat 月份名稱簡寫,monthnamesshort 一月 二月 三月 四月 五月 六月...