QDate 元件提供了一種輸入日期的方法。目前它支援公曆（預設）和波斯曆。
提示
對於處理日期和/或時間，也請查看 Quasar 日期工具。
用法
警告
請注意，模型的實際日期均為字串格式。
基本
提示
對於橫向模式，您可以將其與 $q.screen 一起使用，以使 QDate 具有響應性。範例：:landscape="$q.screen.gt.xs"。更多資訊：Quasar Screen 外掛程式。
多重選擇
請注意，以下模型是一個陣列，並且我們指定了 “multiple” 屬性。
點擊已選定的日期將取消選擇。
範圍選擇
請注意以下範例中，模型是一個物件（單選）或物件陣列（多選）。
提示
- 點擊已選定的日期將取消選擇。
- 使用者目前編輯範圍也可以通過
setEditingRange方法以程式方式設定（查看 API 卡片）。 - 關於目前編輯範圍有兩個有用的事件：
range-start和range-end（查看 API 卡片）。
警告
range 屬性僅與 options 屬性部分相容：選定的範圍也可能包含 “不可選取” 的日期。
自訂標題和副標題
當不在 ‘minimal’ 模式下時，QDate 具有計算出的標題和副標題。您可以覆蓋它，如下例所示。
點擊標題時，QDate 的視圖將更改為日曆，而點擊副標題時，視圖將切換到年份選擇。
功能
當模型未填寫（例如 null、void 0 / undefined）時，QDate 仍然必須顯示一年中某個月的日曆。您可以使用 default-year-month 屬性來實現此目的，否則將顯示當前月份。
預設視圖可以更改。
一週的第一天是根據您設定的 Quasar 語言包 應用的，但您也可以強制設定，如下例所示。
點擊 “今天” 按鈕會將日期設定為目前使用者日期。需要標題，因此您不能將其與 “minimal” 模式一起使用
模型遮罩
預設模型遮罩為 YYYY/MM/DD，但是您也可以使用自訂遮罩。
mask 屬性 token 可以在 Quasar Utils > Date utils 中找到。
關於 SSR 的注意事項
在遮罩中使用 x 或 X（時間戳記）可能會導致客戶端上的 hydration 錯誤，因為解碼模型字串必須使用 new Date()，這會考慮到本地時區。因此，如果伺服器與客戶端位於不同的時區，則伺服器的渲染輸出將與客戶端的輸出不同，因此 hydration 將失敗。
關於波斯曆的注意事項
當使用波斯曆時，QDate 的遮罩會強制設定為 YYYY/MM/DD。
如果您想在遮罩中插入字串（包括 [ 和 ] 字元），請確保使用 [ 和 ] 將它們包圍起來以進行跳脫，否則這些字元可能會被解釋為格式 token。
使用遮罩將 QDate 和 QTime 連接到同一個模型
提示
如果您想以程式方式設定 QDate 的值，您可以通過重新分配您傳遞的值來實現。但是，更新的值需要是與您的遮罩格式相同的字串。例如，如果您的遮罩是 'dddd, MMM D, YYYY'，則傳遞 '2019/04/28' 作為值將不起作用，您需要傳遞 'Sunday, Apr 28, 2019' 作為替代。
自訂臨時區域設定
如果由於某些原因，您需要使用自訂臨時區域設定，而不是目前已設定的 Quasar 語言包，則可以使用 locale 屬性
色彩
高亮事件
第一個範例使用陣列，第二個範例使用函式。
限制選項
- 您可以使用
options屬性來限制使用者選擇特定時間。 - 或者，為了更深入地限制選項，您還可以為
options-fn屬性提供一個函式（以下第二個和第三個範例）。
警告
options 屬性僅與 range 屬性部分相容。範圍可能包含 “不可選取” 的日期。
應用導航邊界
在以下範例中，導航限制在 2020/07 和 2020/09 之間。
使用額外按鈕
您可以使用預設插槽來新增按鈕
與 QSplitter 和 QTabPanels 搭配使用
更多資訊：QSplitter、QTabPanels。
與 QInput 搭配使用
在 QInput 上使用相同模型連接 QDate 和 QTime
以下是 QInput mask 和 rules 屬性的輔助工具。您可以為了方便起見使用它們，或者編寫字串來指定您的 自訂需求。
範例：“date”、“time”、“fulltime”。
更多資訊：QInput。
波斯曆
提示
您可以將其與 Quasar 語言包（例如波斯語 (波斯語，fa-ir)）結合使用，以翻譯 QDate 字串，獲得完整體驗。
警告
當使用波斯曆時，QDate 的遮罩會強制設定為 YYYY/MM/DD。
原生表單提交
當處理具有 action 和 method 的原生表單時（例如，當將 Quasar 與 ASP.NET 控制器一起使用時），您需要在 QDate 上指定 name 屬性，否則 formData 將不會包含它（如果應該包含）。