Skip to content

Commit e8745a0

Browse files
tgpetrovtgpetrov
committed
feat: add new ui element for picking date and time
1 parent 9523312 commit e8745a0

22 files changed

+1460
-287
lines changed

‎README.md‎

Lines changed: 75 additions & 12 deletions
Large diffs are not rendered by default.

‎demo-angular/src/app/home/home.component.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@
66
color: #303F9F;
77
}
88

9+
.header {
10+
font-size: 16;
11+
margin-top: 12;
12+
margin-bottom: 6;
13+
color: white;
14+
background-color: #2196F3;
15+
text-align: center;
16+
}
17+
918
label {
1019
padding: 6 4;
1120
}

‎demo-angular/src/app/home/home.component.html‎

Lines changed: 163 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,169 @@
22
<Label class="action-bar-title" text="DateTimePicker Demo NG"></Label>
33
</ActionBar>
44

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

0 commit comments

Comments
 (0)