Date Picker 限制可選擇的日期
限制使用者在選擇日期時,只能選擇特定的日期,例如每月的 1 或 15 號。
Last updated
限制使用者在選擇日期時,只能選擇特定的日期,例如每月的 1 或 15 號。
Last updated
在「捐款表單」上,使用者在選擇捐款日期時,只能選擇每月的 1 或 15 號。
使用 Date Picker 元件,限制使用者在選擇日期時,只能選擇特定的日期,例如每月的 1 或 15 號。
可使用 Format Date Picker Days
plug-in[2] 使用 SQL query 或者 ICS calendar file 來設定 day picker 中的月天的格式。
例如, 將某些月天設定為不可選擇,或者設定某些月天的提示訊息。
若不用 plug-in,也可以使用 JavaScript 來設定 day picker 中的月天的格式。
自 Apex 22.2 開始, Date Picker 可以接受 dayFormatter
function 來設定 day picker 中的月天的格式。
做法如下:
這段程式碼放在頁面的 Execute when Page Loads
屬性中,當頁面載入時,即會執行。
執行時, Date Picker 的每一個月天都會呼叫 dayFormatter
function 來設定格式。呼叫時,傳入 pCurrentDate
字串,代表當前的日期
使用 apex.date.parse
來將 pCurrentDate
字串轉換為 Date 物件。
若要取得日期的月天(1-31),可以使用 getDate()
方法; 若要取得週天(Sunday(0) ~ Saturday(6)),可以使用 getDay()
方法。
該函數回傳一個資料物件,包含以下屬性:
disabled
: 是否停用該日期,若為 true
,則該日期無法選擇。
class
: 日期的 CSS class 名稱,可用來套用自訂的 CSS 樣式。
tooltip
: 日期的提示訊息。
Fig source: [1]
在 捐款表單
上,有一個日期欄位 P203_DONATION_START_DATE
,使用者在選擇捐款日期時,只能選擇每月的 1 或 15 號。
S1. 在 Page Designer 中編輯該頁面。
S2. 在頁面屬性 Execute when Page Loads
中,新增以下 JavaScript 代碼:
S3. 停用 Date Picker 的 Today 按鈕,避免使用者選擇不合法的日期。
S4. 點選 Save 按鈕, 儲存頁面並測試。
當使用者在選擇日期時,只能選擇每月的 1 或 15 號。
我們可以使用 dayFormatter
function 來設定 Date Picker 中的月天的格式,例如限制使用者在選擇日期時,只能選擇每月的 1 或 15 號。
dayFormatter
function 會在 Date Picker 中的每一個月天被呼叫,並回傳一個資料物件,包含 disabled
, class
, tooltip
等屬性。
也可以使用 Format Date Picker Days
plug-in 來設定 day picker 中的月天的格式。這個就是一個更簡單的方法,不需要寫 JavaScript 代碼。有興趣的讀者可以參考 [2]