iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

Angular10 實作教學系列 第 3

NG10鐵人賽 - 3 - Angular Material 日期使用(3) - 日曆常用功能

一、一般點擊 Icon 顯示日曆

html

<!-- [owlDateTime] 將 dt2 日曆的值綁定到 input 的 value -->
<input [owlDateTime]="dt2" placeholder="請輸入日期和時間">
<!-- [owlDateTimeTrigger] 開啟 dt2 日曆 -->
<mat-datepicker-toggle [owlDateTimeTrigger]="dt2"></mat-datepicker-toggle>
<!-- 日曆的本體 -->
<owl-date-time #dt2></owl-date-time>

二、點擊 輸入框 顯示日曆

html

<input [owlDateTime]="dt2" [owlDateTimeTrigger]="dt2" placeholder="請輸入日期和時間">
<owl-date-time #dt2></owl-date-time>

三、設定起始日期和時間到顯示日曆

html

<input [owlDateTime]="dt2" [owlDateTimeTrigger]="dt2" placeholder="請輸入日期和時間">
<owl-date-time [startAt]="startAt" #dt2></owl-date-time>

ts

export class AppComponent {
    startAt = new Date("2020/08/30 15:00");
}

owl-date-time element 屬性和事件

<owl-date-time>
屬性 型別
[disabled] 是否禁止選取日曆 boolean
[pickerType] 選取器是哪種格式 1. both:日曆 + 時間 2. calendar:日曆 3. timer:時間
[startAt] 日曆的預設時間 Date
[startView] 起始日曆介面呈現 1. month:從選擇「日」開始 2. year:從選擇「月」開始 3. multi-year:從選擇「年」開始
[stepMinute] 加減多少分鐘 number
事件
(afterPickerOpen) 開啟日期後調用

上一篇
NG10鐵人賽 - 2 - Angular Material 日期使用(2) - 安裝 OwlDateTime
下一篇
NG10鐵人賽 - 4 - Angular Material 日期使用(4) - 日期範圍選取;過濾選取日期
系列文
Angular10 實作教學30

尚未有邦友留言

立即登入留言