日期

使用與 UOF X 一致的日期／日期時間選擇器

Import 相依

import { UofxDatePickerModule } from '@uofx/web-components/date-picker';

使用方式

ngModel

<uofx-date-picker [(ngModel)]="date"></uofx-date-picker>

form

<uofx-date-picker formControlName="date"></uofx-date-picker>

readonly

<uofx-date-picker formControlName="date" [readonly]="true"></uofx-date-picker>

range

<uofx-date-picker formControlName="date"> [range]="true"></uofx-date-picker>

enableTime

<uofx-date-picker formControlName="date" [enableTime]="true"></uofx-date-picker>
uofx-date-picker>

canSetMinute = false

<uofx-date-picker formControlName="date" [canSetMinute]="false" [enableTime]="true"></uofx-date-picker>

可用屬性

日期與時間格式請參考元件官方文件：flatpickr

<uofx-date-picker></uofx-date-picker>

參數名稱	類型	預設值	說明
readonly	boolean	false	是否為唯讀模式
range	boolean	false	是否啟用區間選擇
enableTime	boolean	false	是否啟用時間選擇
dateFormat	string	Y/m/d	日期顯示格式（依 flatpickr 規則）
timeFormat	string	H:i	時間顯示格式（依 flatpickr 規則）
minDate	string / Date	null	可選的最小日期
maxDate	string / Date	null	可選的最大日期
canSetMinute	boolean	true	是否顯示分鐘選擇器
minuteStep	number	5	分鐘選擇的間距單位（Step）
placeholder	string	null	輸入框提示文字

可用事件

<uofx-date-picker (onChange)="onDateChange($event)>></uofx-date-picker>

事件名稱	參數	說明
onChange	$event: FlatpickrEvent	日期改變時觸發