-
-
Notifications
You must be signed in to change notification settings - Fork 26
/
home.component.html
168 lines (136 loc) · 10.5 KB
/
home.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<ActionBar class="action-bar">
<Label class="action-bar-title" text="DateTimePicker Demo NG"></Label>
</ActionBar>
<ScrollView #scrollView>
<StackLayout class="p-20">
<Label text="DatePickerField" id="date" class="header" (tap)="onHeaderTap($event)" [opacity]="dateOpacity"></Label>
<StackLayout [visibility]="dateVisibility">
<Label text="basic usage" class="content"></Label>
<DatePickerField hint="select date"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="initial values" class="content"></Label>
<DatePickerField date="2019/02/24"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="min and max date" class="content"></Label>
<DatePickerField minDate="2020/02/02" maxDate="2021/02/02" hint="tap to select"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="modified picker texts" class="content"></Label>
<DatePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
pickerTitle="Confirm predefined date selection" pickerDefaultDate="2019/05/15"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="preferred locale: en_US" class="content"></Label>
<DatePickerField locale="en_US" hint="select date" pickerOkText="OK"
pickerCancelText="Cancel" pickerTitle="Select date"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="preferred locale: de_DE" class="content"></Label>
<DatePickerField locale="de_DE" hint="datum auswählen" pickerOkText="Bestätigen"
pickerCancelText="Stornieren" pickerTitle="Datum auswählen"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="custom format" class="content"></Label>
<DatePickerField date="2019/02/24" dateFormat="'date': dd MMMM yyyy"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="css applied" class="content"></Label>
<DatePickerField date="2019/02/24" pickerTitle="select date" class="apply-css"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="binding" class="content"></Label>
<Label [text]="dateTime1" color="#CBCBCB"></Label>
<DatePickerField [(ngModel)]="dateTime1"></DatePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
</StackLayout>
<Label text="TimePickerField" id="time" class="header" (tap)="onHeaderTap($event)" [opacity]="timeOpacity"></Label>
<StackLayout [visibility]="timeVisibility">
<Label text="basic usage" class="content"></Label>
<TimePickerField hint="select time"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="initial values" class="content"></Label>
<TimePickerField time="01:00"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="time format 12h" class="content"></Label>
<TimePickerField time="16:00" timeFormat="h:mm a" locale="en_US"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="time format 24h" class="content"></Label>
<TimePickerField time="16:00" timeFormat="HH:mm" locale="en_GB"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="modified picker texts" class="content"></Label>
<TimePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
pickerTitle="Confirm predefined time selection" pickerDefaultTime="22:00"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="preferred locale: en_US" class="content"></Label>
<TimePickerField locale="en_US" hint="select time" pickerOkText="OK"
pickerCancelText="Cancel" pickerTitle="Select time"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="preferred locale: de_DE" class="content"></Label>
<TimePickerField locale="de_DE" hint="zeit wählen" pickerOkText="Bestätigen"
timeFormat="HH:mm" pickerCancelText="Stornieren" pickerTitle="Zeit wählen"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="custom format" class="content"></Label>
<TimePickerField time="01:00" timeFormat="'time': HH:mm"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="css applied" class="content"></Label>
<TimePickerField time="01:00" pickerTitle="select time" class="apply-css"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="binding" class="content"></Label>
<Label [text]="dateTime2" color="#CBCBCB"></Label>
<TimePickerField [(ngModel)]="dateTime2"></TimePickerField>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
</StackLayout>
<Label text="DateTimePickerFields" id="dateTime" class="header" (tap)="onHeaderTap($event)" [opacity]="dateTimeOpacity"></Label>
<StackLayout [visibility]="dateTimeVisibility">
<Label text="basic usage" class="content"></Label>
<DateTimePickerFields hintDate="select date" hintTime="select time"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="initial values" class="content"></Label>
<DateTimePickerFields date="2019/02/24 01:00"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="min and max date" class="content"></Label>
<DateTimePickerFields minDate="2020/02/02" maxDate="2021/02/02"
hintDate="tap to select date" hintTime="tap to select time"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="time format 12h" class="content"></Label>
<DateTimePickerFields date="2019/02/24 16:00" timeFormat="h:mm a" locale="en_US"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="time format 24h" class="content"></Label>
<DateTimePickerFields date="2019/02/24 16:00" timeFormat="HH:mm" locale="en_GB"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="modified picker texts" class="content"></Label>
<DateTimePickerFields hintDate="tap to choose date" hintTime="tap to choose time"
pickerOkText="Approve" pickerCancelText="Reject"
pickerTitleDate="Confirm predefined date selection"
pickerTitleTime="Confirm predefined time selection"
pickerDefaultDate="2019/05/15 22:00" autoPickTime="true"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="preferred locale: en_US" class="content"></Label>
<DateTimePickerFields locale="en_US" hintDate="select date" hintTime="select time"
pickerOkText="OK" pickerCancelText="Cancel" pickerTitleDate="Select date" pickerTitleTime="Select time"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="preferred locale: de_DE" class="content"></Label>
<DateTimePickerFields locale="de_DE" hintDate="datum auswählen" hintTime="zeit wählen"
pickerOkText="Bestätigen" pickerCancelText="Stornieren"
pickerTitleDate="Datum auswählen" pickerTitleTime="Zeit wählen"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="custom format" class="content"></Label>
<DateTimePickerFields date="2019/02/24 01:00"
dateFormat="'d': dd MMMM yyyy" timeFormat="'t': HH:mm"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="css applied" class="content"></Label>
<DateTimePickerFields date="2019/02/24 01:00" class="apply-css"
pickerTitleDate="select date" pickerTitleTime="select time"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="binding" class="content"></Label>
<Label [text]="dateTime3" color="#CBCBCB"></Label>
<DateTimePickerFields [(ngModel)]="dateTime3"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
<Label text="vertical orientation" class="content"></Label>
<DateTimePickerFields hintDate="select date" hintTime="select time"
orientation="vertical"></DateTimePickerFields>
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
</StackLayout>
<Label text="Custom Buttons" id="custom" class="header" (tap)="onHeaderTap($event)" [opacity]="customOpacity"></Label>
<StackLayout [visibility]="customVisibility">
<TextField opacity="0"></TextField>
<Button [text]="dateText" (tap)="onPickDateTap($event)"></Button>
<Button [text]="timeText" (tap)="onPickTimeTap($event)"></Button>
<Button [text]="dateTimeText" (tap)="onPickDateTimeTap($event)"></Button>
</StackLayout>
</StackLayout>
</ScrollView>