jQuery UI - 日期選擇器

上一頁
下一頁

jQuery UI 中的日期選擇器允許使用者輕鬆直觀地輸入日期。您可以輕鬆自定義日期格式和語言、限制可選擇日期範圍以及新增按鈕和其他導航選項。

jQuery UI 提供了datepicker() 方法，該方法建立一個日期選擇器並透過新增新的 CSS 類來更改頁面上 HTML 元素的外觀。將包裝集中 <input>、<div> 和 <span> 元素轉換為日期選擇器控制元件。

預設情況下，對於 <input> 元素，當關聯的文字欄位獲得焦點時，日期選擇器日曆會在一個小覆蓋層中開啟。對於內聯日曆，只需將日期選擇器附加到 <div> 或 <span> 元素即可。

語法

datepicker() 方法可以兩種形式使用：

$ (selector, context).datepicker (options) 方法

datepicker (options) 方法宣告 <input> 元素（或 <div> 或 <span>，取決於您選擇如何顯示日曆）應作為日期選擇器進行管理。options 引數是一個物件，用於指定日期選擇器元素的行為和外觀。

語法

$(selector, context).datepicker(options);

您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔，如下所示：

$(selector, context).datepicker({option1: value1, option2: value2..... });

下表列出了此方法可以使用的一些不同的options：

序號 選項 & 描述
1 altField

此選項指定一個 jQuery 選擇器，用於一個也使用任何日期選擇更新的欄位。altFormat 選項可用於設定此值的格式。這對於將日期值設定為隱藏的輸入元素以提交到伺服器非常有用，同時向用戶顯示更友好的格式。預設值為""。

選項 - altField

此選項指定一個 jQuery 選擇器，用於一個也使用任何日期選擇更新的欄位。altFormat 選項可用於設定此值的格式。這對於將日期值設定為隱藏的輸入元素以提交到伺服器非常有用，同時向用戶顯示更友好的格式。預設值為""。

語法

$(".selector").datepicker(
   { altField: "#actualDate" }
);
2 altFormat

當指定了altField 選項時使用此選項。它提供寫入備用元素的值的格式。預設值為""。

選項 - altFormat

當指定了altField 選項時使用此選項。它提供寫入備用元素的值的格式。預設值為""。

語法

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
3 appendText

此選項是一個字串值，放置在 <input> 元素之後，旨在向用戶顯示說明。預設值為""。

選項 - appendText

此選項是一個字串值，放置在 <input> 元素之後，旨在向用戶顯示說明。預設值為""。

語法

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
4 autoSize

如果此選項設定為true，則調整 <input> 元素的大小以適應日期選擇器的日期格式，如 dateFormat 選項設定的那樣。預設值為false。

選項 - autoSize

如果此選項設定為true，則調整 <input> 元素的大小以適應日期選擇器的日期格式，如 dateFormat 選項設定的那樣。預設值為false。

語法

$(".selector").datepicker(
   { autoSize: true }
);
5 beforeShow

此選項是一個回撥函式，在顯示日期選擇器之前呼叫，並將 <input> 元素和日期選擇器例項作為引數傳遞。此函式可以返回一個選項雜湊表，用於修改日期選擇器。預設值為""。

選項 - beforeShow

此選項是一個回撥函式，在顯示日期選擇器之前呼叫，並將 <input> 元素和日期選擇器例項作為引數傳遞。此函式可以返回一個選項雜湊表，用於修改日期選擇器。預設值為""。
6 beforeShowDay

此選項是一個回撥函式，它將日期作為引數，在顯示日期選擇器中的每一天之前呼叫，並將日期作為唯一的引數傳遞。這可以用來覆蓋日元素的一些預設行為。此函式必須返回一個三元素陣列。預設值為null。

選項 - beforeShowDay

此選項是一個回撥函式，它將日期作為引數，在顯示日期選擇器中的每一天之前呼叫，並將日期作為唯一的引數傳遞。這可以用來覆蓋日元素的一些預設行為。此函式必須返回一個三元素陣列，如下所示：

  • [0]—true 表示日期可選，false 否則。

  • [1]—要應用的 CSS 類名稱的空格分隔字串或空字串以不應用任何類

  • [2]—一個可選字串，用於將工具提示應用於日元素

預設值為null。
7 buttonImage

此選項指定要顯示在按鈕上的影像的路徑，該按鈕透過將showOn 選項設定為 buttons 或 both 來啟用。如果也提供了buttonText，則按鈕文字將成為按鈕的alt 屬性。預設值為""。

選項 - buttonImage

此選項指定要顯示在按鈕上的影像的路徑，該按鈕透過將showOn 選項設定為 buttons 或 both 來啟用。如果也提供了buttonText，則按鈕文字將成為按鈕的alt 屬性。預設值為""。

語法

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
8 buttonImageOnly

如果此選項設定為true，則指定由 buttonImage 指定的影像將獨立顯示（不在按鈕上）。showOn 選項仍必須設定為 button 或 both 才能顯示影像。預設值為false。

選項 - buttonImageOnly

如果此選項設定為true，則指定由 buttonImage 指定的影像將獨立顯示（不在按鈕上）。showOn 選項仍必須設定為 button 或 both 才能顯示影像。預設值為false。

語法

$(".selector").datepicker(
   { buttonImageOnly: true }
);
9 buttonText

此選項指定透過將showOn 選項設定為button 或both 來啟用的按鈕的標題。預設值為"..."。

選項 - buttonText

此選項指定透過將showOn 選項設定為button 或both 來啟用的按鈕的標題。預設值為"..."。

語法

$(".selector").datepicker(
   { buttonText: "Choose" }
);
10 calculateWeek

此選項是一個自定義函式，用於計算並返回作為唯一引數傳遞的日期的星期數。預設實現是$.datepicker.iso8601Week() 實用程式函式提供的實現。

選項 - calculateWeek

此選項是一個自定義函式，用於計算並返回作為唯一引數傳遞的日期的星期數。預設實現是$.datepicker.iso8601Week() 實用程式函式提供的實現。

語法

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);
11 changeMonth

如果此選項設定為true，則會顯示一個月份下拉列表，允許使用者直接更改月份，而無需使用箭頭按鈕逐步瀏覽它們。預設值為false。

選項 - changeMonth

如果此選項設定為true，則會顯示一個月份下拉列表，允許使用者直接更改月份，而無需使用箭頭按鈕逐步瀏覽它們。預設值為false。

語法

$(".selector").datepicker(
   { changeMonth: true }
);
12 changeYear

如果此選項設定為true，則會顯示一個年份下拉列表，允許使用者直接更改年份，而無需使用箭頭按鈕逐步瀏覽它們。yearRange 選項可用於控制哪些年份可供選擇。預設值為false。

選項 - changeYear

如果此選項設定為true，則會顯示一個年份下拉列表，允許使用者直接更改年份，而無需使用箭頭按鈕逐步瀏覽它們。yearRange 選項可用於控制哪些年份可供選擇。預設值為false。

語法

$(".selector").datepicker(
   { changeYear: true }
);
13 closeText

此選項指定文字以替換關閉按鈕的預設標題“完成”。當透過showButtonPanel 選項顯示按鈕面板時使用。預設值為"Done"。

選項 - closeText

此選項指定文字以替換關閉按鈕的預設標題“完成”。當透過showButtonPanel 選項顯示按鈕面板時使用。預設值為"Done"。

語法

$(".selector").datepicker(
   { closeText: "Close" }
);
14 constrainInput

如果此選項設定為true（預設值），則 <input> 元素中的文字輸入將限制為當前dateformat 選項允許的字元。預設值為true。

選項 - constrainInput

如果此選項設定為true（預設值），則 <input> 元素中的文字輸入將限制為當前dateformat 選項允許的字元。預設值為true。

語法

$(".selector").datepicker(
   { constrainInput: false }
);
15 currentText

此選項指定文字以替換當前按鈕的預設標題“今天”。如果透過showButtonPanel 選項顯示按鈕面板，則使用此選項。預設值為Today。

選項 - currentText

此選項指定文字以替換當前按鈕的預設標題“今天”。如果透過showButtonPanel 選項顯示按鈕面板，則使用此選項。預設值為Today。

語法

$(".selector").datepicker(
   { currentText: "Now" }
);
16 dateFormat

此選項指定要使用的日期格式。預設值為mm/dd/yy。

選項 - dateFormat

此選項指定要使用的日期格式。預設值為mm/dd/yy。

語法

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
17 dayNames

此選項是一個 7 元素陣列，提供完整的一天名稱，其中第 0 個元素表示星期日。可用於本地化控制元件。預設值為[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]。

選項 - dayNames

此選項是一個 7 元素陣列，提供完整的一天名稱，其中第 0 個元素表示星期日。可用於本地化控制元件。預設值為[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]。

語法

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
18 dayNamesMin

此選項是一個 7 元素陣列，提供最短的一天名稱，其中第 0 個元素表示星期日，用作列標題。可用於本地化控制元件。預設值為[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]。

選項 - dayNamesMin

此選項是一個 7 元素陣列，提供最短的一天名稱，其中第 0 個元素表示星期日，用作列標題。可用於本地化控制元件。預設值為[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]。

語法

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
19 dayNamesShort

此選項指定一個 7 元素陣列，提供短的一天名稱，其中第 0 個元素表示星期日。可用於本地化控制元件。預設值為[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]。

選項 - dayNamesShort

此選項指定一個 7 元素陣列，提供短的一天名稱，其中第 0 個元素表示星期日。可用於本地化控制元件。預設值為[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]。

語法

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
20 defaultDate

此選項設定控制元件的初始日期，如果 <input> 元素沒有值，則覆蓋今天的預設值。這可以是Date 例項、從今天算起的天數或指定絕對日期或相對日期的字串。預設值為null。

選項 - defaultDate

此選項設定控制元件的初始日期，如果 <input> 元素沒有值，則覆蓋今天的預設值。這可以是Date 例項、從今天算起的天數或指定絕對日期或相對日期的字串。預設值為null。

語法

$(".selector").datepicker(
   { defaultDate: +7 }
);
21 duration

此選項指定使日期選擇器出現的動畫速度。可以是slow、normal 或 fast 之一，或者動畫持續的毫秒數。預設值為normal。

選項 - duration

此選項指定使日期選擇器出現的動畫速度。可以是slow、normal 或 fast 之一，或者動畫持續的毫秒數。預設值為normal。

語法

$(".selector").datepicker(
   { duration: "slow" }
);
22 firstDay

此選項指定哪一天被視為一週的第一天，並將顯示為最左邊的列。預設值為0。

選項 - firstDay

此選項指定哪一天被視為一週的第一天，並將顯示為最左邊的列。預設值為0。

語法

$(".selector").datepicker(
   { firstDay: 1 }
);
23 gotoCurrent

如果此選項設定為true，則當前日期連結將設定為所選日期，覆蓋今天的預設值。預設值為false。

選項 - gotoCurrent

如果此選項設定為true，則當前日期連結將設定為所選日期，覆蓋今天的預設值。預設值為false。

語法

$(".selector").datepicker(
   { gotoCurrent: true }
);
24 hideIfNoPrevNext

如果此選項設定為true，則隱藏上一個和下一個連結（而不是僅停用它們），當它們不適用時，由minDate 和maxDate 選項的設定確定。預設值為false。

選項 - hideIfNoPrevNext

如果此選項設定為true，則隱藏上一個和下一個連結（而不是僅停用它們），當它們不適用時，由minDate 和maxDate 選項的設定確定。預設值為false。

語法

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
25 isRTL

如果此選項設定為true，則指定本地化為從右到左的語言。預設值為false。

選項 - isRTL

如果此選項設定為true，則指定本地化為從右到左的語言。預設值為false。

語法

$(".selector").datepicker(
   { isRTL: true }
);
26 maxDate

此選項設定控制元件的最大可選日期。這可以是 Date 例項、從今天算起的數字或指定絕對日期或相對日期的字串。預設值為null。

選項 - maxDate

此選項設定控制元件的最大可選日期。這可以是 Date 例項、從今天算起的數字或指定絕對日期或相對日期的字串。預設值為null。

語法

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
27 minDate

此選項設定控制元件的最小可選日期。這可以是Date 例項、從今天算起的數字或指定絕對日期或相對日期的字串。預設值為null。

選項 - minDate

此選項設定控制元件的最小可選日期。這可以是Date 例項、從今天算起的數字或指定絕對日期或相對日期的字串。預設值為null。

語法

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
28 monthNames

此選項是一個包含 12 個元素的陣列，提供完整的月份名稱，其中第 0 個元素表示 1 月。可用於本地化控制元件。預設值為[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]。

選項 - monthNames

此選項是一個包含 12 個元素的陣列，提供完整的月份名稱，其中第 0 個元素表示 1 月。可用於本地化控制元件。預設值為[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]。

語法

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
29 monthNamesShort

此選項指定一個包含 12 個元素的陣列，提供簡短的月份名稱，其中第 0 個元素表示 1 月。可用於本地化控制元件。預設值為[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]。

選項 - monthNamesShort

此選項指定一個包含 12 個元素的陣列，提供簡短的月份名稱，其中第 0 個元素表示 1 月。可用於本地化控制元件。預設值為[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]。

語法

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
30 navigationAsDateFormat

如果將此選項設定為true，則nextText、prevText和currentText的導航連結在顯示之前會透過$.datepicker.formatDate()函式傳遞。這允許為那些將被相關值替換的選項提供日期格式。預設值為false。

選項 - navigationAsDateFormat

如果將此選項設定為true，則nextText、prevText和currentText的導航連結在顯示之前會透過$.datepicker.formatDate()函式傳遞。這允許為那些將被相關值替換的選項提供日期格式。預設值為false。

語法

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
31 nextText

此選項指定文字以替換下一個月導航連結的預設標題“Next”。ThemeRoller 將此文字替換為圖示。預設值為Next。

選項 - nextText

此選項指定文字以替換下一個月導航連結的預設標題“Next”。ThemeRoller 將此文字替換為圖示。預設值為Next。

語法

$(".selector").datepicker(
   {  nextText: "Later" }
);
32 numberOfMonths

此選項指定在日期選擇器中顯示的月份數。預設值為1。

選項 - numberOfMonths

此選項指定在日期選擇器中顯示的月份數。預設值為1。支援多種型別 -

  • 數字 - 在單行中顯示的月份數。

  • 陣列 - 定義要顯示的行數和列數的陣列。

語法

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);
33 onChangeMonthYear

此選項是一個回撥函式，當日期選擇器移動到新的月份或年份時呼叫，並以選定的年份、月份（基於 1）和日期選擇器例項作為引數傳遞，函式上下文設定為輸入欄位元素。預設值為null。

選項 - onChangeMonthYear

此選項是一個回撥函式，當日期選擇器移動到新的月份或年份時呼叫，並以選定的年份、月份（基於 1）和日期選擇器例項作為引數傳遞，函式上下文設定為輸入欄位元素。預設值為null。
34 onClose

此選項是一個回撥函式，每當日期選擇器關閉時呼叫，將選定的日期作為文字（如果沒有選擇則為空字串）和日期選擇器例項傳遞，函式上下文設定為輸入欄位元素。預設值為null。

選項 - onClose

此選項是一個回撥函式，每當日期選擇器關閉時呼叫，將選定的日期作為文字（如果沒有選擇則為空字串）和日期選擇器例項傳遞，函式上下文設定為輸入欄位元素。預設值為null。
35 onSelect

此選項是一個回撥函式，每當選擇日期時呼叫，將選定的日期作為文字（如果沒有選擇則為空字串）和日期選擇器例項傳遞，函式上下文設定為輸入欄位元素。預設值為null。

選項 - onSelect

此選項是一個回撥函式，每當選擇日期時呼叫，將選定的日期作為文字（如果沒有選擇則為空字串）和日期選擇器例項傳遞，函式上下文設定為輸入欄位元素。預設值為null。
36 prevText

此選項指定文字以替換上一個月導航連結的預設標題Prev。（請注意，ThemeRoller 會將此文字替換為圖示）。預設值為PrevdefaultDatedayNamesMin。

選項 - prevText

此選項指定文字以替換上一個月導航連結的預設標題Prev。（請注意，ThemeRoller 會將此文字替換為圖示）。預設值為Prev。

語法

$(".selector").datepicker(
   { prevText: "Earlier" }
);
37 selectOtherMonths

如果將此選項設定為true，則顯示在顯示的月份（s）之前或之後的天數可以選擇。除非showOtherMonths選項為 true，否則不會顯示這些日期。預設值為false。

選項 - selectOtherMonths

如果將此選項設定為true，則顯示在顯示的月份（s）之前或之後的天數可以選擇。除非showOtherMonths選項為 true，否則不會顯示這些日期。預設值為false。

語法

$(".selector").datepicker(
   { selectOtherMonths: true }
);
38 shortYearCutoff

如果此選項為數字，則指定一個介於 0 和 99 年之間的值，在此值之前，任何兩位數的年份值都將被視為屬於上一個世紀。如果此選項是字串，則該值將進行數字轉換並新增到當前年份。預設值為+10，表示從當前年份起的 10 年。

選項 - shortYearCutoff

如果此選項為數字，則指定一個介於 0 和 99 年之間的值，在此值之前，任何兩位數的年份值都將被視為屬於上一個世紀。如果此選項是字串，則該值將進行數字轉換並新增到當前年份。預設值為+10，表示從當前年份起的 10 年。

語法

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
39 showAnim

此選項指定設定用於顯示和隱藏日期選擇器的動畫的名稱。如果指定，則必須是show（預設）、fadeIn、slideDown或任何 jQuery UI 顯示/隱藏動畫之一。預設值為show。

選項 - showAnim

此選項指定設定用於顯示和隱藏日期選擇器的動畫的名稱。如果指定，則必須是show（預設）、fadeIn、slideDown或任何 jQuery UI 顯示/隱藏動畫之一。預設值為show。

語法

$(".selector").datepicker(
   { showAnim: "fold" }
);
40 showButtonPanel

如果將此選項設定為true，則在日期選擇器的底部顯示一個按鈕面板，其中包含當前和關閉按鈕。可以透過currentText和closeText選項提供這些按鈕的標題。預設值為false。

選項 - showButtonPanel

如果將此選項設定為true，則在日期選擇器的底部顯示一個按鈕面板，其中包含當前和關閉按鈕。可以透過currentText和closeText選項提供這些按鈕的標題。預設值為false。

語法

$(".selector").datepicker(
   { showButtonPanel: true }
);
41 showCurrentAtPos

此選項指定從左上角開始的基於 0 的索引，其中包含當前日期的月份應放置在多月顯示中的位置。預設值為0。

選項 - showCurrentAtPos

此選項指定從左上角開始的基於 0 的索引，其中包含當前日期的月份應放置在多月顯示中的位置。預設值為0。

語法

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
42 showMonthAfterYear

如果將此選項設定為true，則在日期選擇器的標題中反轉月份和年份的位置。預設值為false。

選項 - showMonthAfterYear

如果將此選項設定為true，則在日期選擇器的標題中反轉月份和年份的位置。預設值為false。

語法

$(".selector").datepicker(
   { showMonthAfterYear: true }
);
43 showOn

此選項指定日期選擇器何時出現。可能的值為focus、button 或 both。預設值為focus。

選項 - showOn

此選項指定日期選擇器何時出現。可能的值為focus、button 或 both。預設值為focus。

focus（預設）導致日期選擇器在<input>元素獲得焦點時顯示。

button導致在<input>元素之後（但在任何附加文字之前）建立一個按鈕，當單擊該按鈕時會觸發日期選擇器。

both導致建立觸發按鈕，並且焦點事件也會觸發日期選擇器。

語法

$(".selector").datepicker(
   { showOn: "both" }
);
44 showOptions

此選項提供一個雜湊值，當為showAnim選項指定 jQuery UI 動畫時，將其傳遞給動畫。預設值為{}。

選項 - showOptions

此選項提供一個雜湊值，當為showAnim選項指定 jQuery UI 動畫時，將其傳遞給動畫。預設值為{}。

語法

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
45 showOtherMonths

如果將此選項設定為true，則顯示當前月份的第一天和最後一天之前或之後的日期。除非還將selectOtherMonths選項設定為true，否則這些日期不可選擇。預設值為false。

選項 - showOtherMonths

如果將此選項設定為true，則顯示當前月份的第一天和最後一天之前或之後的日期。除非還將selectOtherMonths選項設定為true，否則這些日期不可選擇。預設值為false。

語法

$(".selector").datepicker(
   { showOtherMonths: true }
);
46 showWeek

如果將此選項設定為true，則星期數將顯示在月份顯示左側的一列中。calculateWeek選項可用於更改確定此值的 方式。預設值為false。

選項 - showWeek

如果將此選項設定為true，則星期數將顯示在月份顯示左側的一列中。calculateWeek選項可用於更改確定此值的 方式。預設值為false。

語法

$(".selector").datepicker(
   { showWeek: true }
);
47 stepMonths

此選項指定單擊其中一個月份導航控制元件時移動的月份數。預設值為1。

選項 - stepMonths

此選項指定單擊其中一個月份導航控制元件時移動的月份數。預設值為1。

語法

$(".selector").datepicker(
   { stepMonths: 3 }
);
48 weekHeader

此選項指定要顯示的星期數列的文字，當showWeek為true時，覆蓋預設值Wk。預設值為Wk。

選項 - weekHeader

此選項指定要顯示的星期數列的文字，當showWeek為true時，覆蓋預設值Wk。預設值為Wk。

語法

$(".selector").datepicker(
   { weekHeader: "W" }
);
49 yearRange

此選項指定當changeYear為true時，下拉列表中顯示的年份的限制，形式為from:to。這些值可以是絕對值或相對值（例如：2005:+2，表示從 2005 年到從現在起 2 年）。可以使用字首c使相對值從選定的年份而不是當前年份開始偏移（例如：c-2:c+3）。預設值為c-10:c+10。

選項 - yearRange

此選項指定當changeYear為true時，下拉列表中顯示的年份的限制，形式為from:to。這些值可以是絕對值或相對值（例如：2005:+2，表示從 2005 年到從現在起 2 年）。可以使用字首c使相對值從選定的年份而不是當前年份開始偏移（例如：c-2:c+3）。預設值為c-10:c+10。

語法

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
50 yearSuffix

此選項在日期選擇器標題中的年份後顯示其他文字。預設值為""。

選項 - yearSuffix

此選項在日期選擇器標題中的年份後顯示其他文字。預設值為""。

語法

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

以下部分將向您展示一些日期選擇器功能的工作示例。

預設功能

以下示例演示了日期選擇器功能的簡單示例，不向datepicker()方法傳遞任何引數。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

內聯日期選擇器

以下示例演示了內聯日期選擇器功能的簡單示例。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，我們使用<div>元素獲取內聯日期選擇器。

使用appendText、dateFormat、altField和altFormat

以下示例顯示了在 JqueryUI 的 datepicker 函式中使用三個重要選項(a) appendText (b) dateFormat (c) altField和(d) altFormat。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，您可以看到第一個輸入的日期格式設定為yy-mm-dd。如果您從日期選擇器中選擇某個日期，則相同的日期會反映在第二個輸入欄位中，其日期格式設定為“DD, d MM, yy”。

使用beforeShowDay

以下示例顯示了在 JqueryUI 的 datepicker 函式中使用選項beforeShowDay。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，星期日和星期六被停用。

使用showOn、buttonImage和buttonImageOnly

以下示例顯示了在 JqueryUI 的 datepicker 函式中使用三個重要選項(a) showOn (b) buttonImage和(c) buttonImageOnly。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，顯示了一個需要單擊以開啟日期選擇器的圖示。

使用defaultDate、dayNamesMin和duration

以下示例顯示了在 JqueryUI 的 datepicker 函式中使用三個重要選項(a) dayNamesMin (b) dayNamesMin和(c) duration。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，使用dayNamesMin更改了日期的名稱。您還可以看到設定了預設日期。

使用prevText、nextText、showOtherMonths和selectOtherMonths

以下示例顯示了在 JqueryUI 的 datepicker 函式中使用三個重要選項(a) prevText (b) nextText (c) showOtherMonths和(d) selectOtherMonths。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，prev 和 nect 連結有標題。如果單擊該元素，則日期選擇器將開啟。現在在第一個日期選擇器中，其他月份的日期被停用，因為selectOtherMonths設定為false。在第二個輸入型別的第二個日期選擇器中，selectOtherMonths設定為true。

使用changeMonth、changeYear和numberOfMonths

以下示例顯示了在 JqueryUI 的 datepicker 函式中使用三個重要選項(a) changeMonth (b) changeYear和(c) numberOfMonths。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，您可以看到“月份”和“年份”欄位的下拉選單。並且我們以[2,2]的陣列結構顯示 4 個月。

使用showWeek、yearSuffix和showAnim

以下示例顯示了在 JqueryUI 的 datepicker 函式中使用三個重要選項(a) showWeek (b) yearSuffix和(c) showAnim。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案datepickerexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還必須看到以下輸出。現在，您可以使用結果 -

在上面的示例中，您可以看到星期數顯示在日期選擇器的左側，因為showWeek設定為true。年份字尾為“-CE”。

$ (selector, context).datepicker ("action", [params]) 方法

datepicker (action, params)方法可以在日曆上執行操作，例如選擇新日期。action在第一個引數中指定為字串，並且可以根據給定的操作可選地提供一個或多個params。

基本上，這裡的操作只不過是我們可以以字串形式使用的 jQuery 方法。

語法

$(selector, context).datepicker ("action", [params]);

下表列出了此方法的操作 -

序號 操作和描述
1 destroy()

此操作完全刪除日期選擇器功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

操作 - destroy()

此操作完全刪除日期選擇器功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

語法

$(".selector").datepicker("destroy");
2 dialog( date [, onSelect ] [, settings ] [, pos ] )

此操作在 jQuery UI 對話方塊中顯示日期選擇器。

操作 - dialog( date [, onSelect ] [, settings ] [, pos ] )

此操作在 jQuery UI 對話方塊中顯示日期選擇器。其中 -

  • date是初始日期。

  • onSelect是選擇日期時的回撥函式。該函式接收日期文字和日期選擇器例項作為引數。

  • settings是日期選擇器的新設定。

  • pos是對話方塊頂部/左側的位置，作為[x, y]或包含座標的 MouseEvent。如果未指定，則對話方塊將居中顯示在螢幕上。

語法

$(".selector").datepicker( "dialog", "10/12/2012" );
3 getDate()

此操作返回對應於所選日期的日期。此方法不接受任何引數。

操作 - getDate()

此操作返回對應於所選日期的日期。此方法不接受任何引數。

語法

$(".selector").datepicker("getDate");
4 hide()

此操作關閉之前開啟的日期選擇器。此方法不接受任何引數。

操作 - hide()

此操作關閉之前開啟的日期選擇器。此方法不接受任何引數。

語法

$(".selector").datepicker("hide");
5 isDisabled()

此操作檢查日期選擇器功能是否被停用。此方法不接受任何引數。

操作 - isDisabled()

此操作檢查日期選擇器功能是否被停用。此方法不接受任何引數。

語法

$(".selector").datepicker("isDisabled");
6 option( optionName )

此操作檢索當前與指定的optionName關聯的值。

操作 - option( optionName )

此操作檢索當前與指定的optionName關聯的值。

語法

$(".selector").datepicker( "option", "disabled");
7 option()

此操作獲取一個物件，該物件包含表示當前日期選擇器選項雜湊的鍵/值對。此方法不接受任何引數。

操作 - option()

此操作獲取一個物件，該物件包含表示當前日期選擇器選項雜湊的鍵/值對。此方法不接受任何引數。

語法

var options = $( ".selector" ).datepicker( "option" );
8 option( optionName, value )

此操作設定與指定的optionName關聯的日期選擇器選項的值。

操作 - option( optionName, value )

此操作設定與指定的optionName關聯的日期選擇器選項的值。

語法

$(".selector").datepicker( "option", "disabled", true );
9 option( options )

此操作為日期選擇器設定一個或多個選項。

操作 - option( options )

此操作為日期選擇器設定一個或多個選項。

語法

$(".selector").datepicker("option", { disabled: true });
10 refresh()

此操作在進行了一些外部修改後重新繪製日期選擇器。此方法不接受任何引數。

操作 - refresh()

此操作在進行了一些外部修改後重新繪製日期選擇器。此方法不接受任何引數。

語法

$(".selector").datepicker("refresh");
11 setDate( date )

此操作將指定的日期設定為日期選擇器的當前日期。

操作 - setDate()

此操作將指定的日期設定為日期選擇器的當前日期。

語法

$(".selector").datepicker("setDate", "10/12/2012");
12 show()

此操作開啟日期選擇器。如果日期選擇器附加到輸入框，則輸入框必須可見才能顯示日期選擇器。此方法不接受任何引數。

操作 - show()

此操作開啟日期選擇器。如果日期選擇器附加到輸入框，則輸入框必須可見才能顯示日期選擇器。此方法不接受任何引數。

語法

$(".selector").datepicker("show");
13 widget()

此操作返回包含日期選擇器的jQuery物件。

操作 - widget()

此操作返回包含日期選擇器的jQuery物件。

語法

$(".selector").datepicker("widget");

以下示例顯示了上述表格中列出的一些操作的使用。

setDate()操作的使用

現在讓我們看看一個使用上述表格中操作的示例。以下示例演示了操作setDate的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

讓我們將以上程式碼儲存在一個HTML檔案中datepickerexample.htm並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出 -

show()操作的使用

以下示例演示了操作show的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

讓我們將以上程式碼儲存在一個HTML檔案中datepickerexample.htm並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出 -

日期選擇器元素上的事件管理

目前還沒有日期選擇器事件方法！

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.