# 日期選擇器/Datepicker 創建帶有日期選擇器的可撥動觸發的下拉菜單。 ## 用法 創建日期選擇器，只需要為 `&lt;input&gt;` 元素添加 `data-uk-datepicker` 屬性。還可以自定義日期的格式，為 `data-uk-datepicker` 屬性添加 _format_ 選項就能實現。 注意 使用此組件需要額外添加 `datepicker.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `datepicker.js` 文件，在`js/components`文件夾中。 日期選擇器會檢測 [選擇表單組件](form-select.html) 的JavaScript是否被加載。這允許你在日期選擇器中通過一個選擇表單快捷地切換年月。 ### Example  ### Markup ``` <form class="uk-form"> <input type="" data-uk-datepicker="{format:'DD.MM.YYYY'}"> </form> ``` * * * ## JavaScript 選項 這是關于如何通過屬性設置選項的例子： ``` data-uk-datepicker="{weekstart:0, format:'DD.MM.YYYY'}" ``` | 選項 | 可用值 | 默認值 | 描述 | | --- | --- | --- | --- | | `weekstart` | integer (0..6) | 1 | 每周開始的第一天 | | `i18n` | JSON object | { months:['January',...], weekdays:['Sun',..,'Sat'] } | 日期的稱呼 | | `format` | any combination of DD, MM and YYYY | 'DD.MM.YYYY' | 日期格式 | | `offsettop` | integer | 5 | 輸入值的偏移量 | | `minDate` | bool (false to ignore the option) string (date as in `format`) integer (offset in days from current date) | false | 最小日期 | | `maxDate` | bool (false to ignore the option) string (date as in `format`) integer (offset in days from current date) | false | 最大日期 | | `pos` | 'auto', 'top', 'bottom' | 'auto' | 日期選擇器出現的位置 | ### 手動初始化 ``` var datepicker = UIkit.datepicker(element, { /* options */ }); ``` ### 事件 | 名稱 | 參數 | 描述 | | --- | --- | --- | | `show.uk.datepicker` | event | 日期選擇器菜單顯示時觸發 | | `hide.uk.datepicker` | event | 日期選擇器菜單隱藏時觸發 | | `update.uk.datepicker` | event | 日歷渲染時觸發 |