|
6 | 6 |
|
7 | 7 | <ScrollView> |
8 | 8 | <StackLayout class="p-20"> |
9 | | - <Label text="basic usage" class="content" android:paddingLeft="4"></Label> |
| 9 | + <Label text="basic usage" class="content"></Label> |
10 | 10 | <DatePickerField hint="select date"></DatePickerField> |
11 | 11 | <TimePickerField hint="select time"></TimePickerField> |
12 | 12 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
13 | 13 |
|
14 | | - <Label text="initial values" class="content" android:paddingLeft="4"></Label> |
| 14 | + <Label text="initial values" class="content"></Label> |
15 | 15 | <DatePickerField date="2019/02/24"></DatePickerField> |
16 | 16 | <TimePickerField time="01:00"></TimePickerField> |
17 | 17 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
18 | 18 |
|
19 | | - <Label text="min and max date" class="content" android:paddingLeft="4"></Label> |
| 19 | + <Label text="min and max date" class="content"></Label> |
20 | 20 | <DatePickerField minDate="2020/02/02" maxDate="2021/02/02" hint="tap to select"></DatePickerField> |
21 | 21 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
22 | 22 |
|
23 | | - <Label text="time format 12h" class="content" android:paddingLeft="4"></Label> |
| 23 | + <Label text="time format 12h" class="content"></Label> |
24 | 24 | <TimePickerField time="16:00" timeFormat="h:mm a" locale="en_US"></TimePickerField> |
25 | 25 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
26 | 26 |
|
27 | | - <Label text="time format 24h" class="content" android:paddingLeft="4"></Label> |
| 27 | + <Label text="time format 24h" class="content"></Label> |
28 | 28 | <TimePickerField time="16:00" timeFormat="HH:mm" locale="en_UK"></TimePickerField> |
29 | 29 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
30 | 30 |
|
31 | | - <Label text="modified picker texts" class="content" android:paddingLeft="4"></Label> |
| 31 | + <Label text="modified picker texts" class="content"></Label> |
32 | 32 | <DatePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject" |
33 | 33 | pickerTitle="Confirm predefined date selection" pickerDefaultDate="2019/05/15"></DatePickerField> |
34 | 34 | <TimePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject" |
35 | 35 | pickerTitle="Confirm predefined time selection" pickerDefaultTime="22:00"></TimePickerField> |
36 | 36 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
37 | 37 |
|
38 | | - <Label text="preferred locale: en_US" class="content" android:paddingLeft="4"></Label> |
| 38 | + <Label text="preferred locale: en_US" class="content"></Label> |
39 | 39 | <DatePickerField locale="en_US" hint="select date" pickerOkText="OK" |
40 | 40 | pickerCancelText="Cancel" pickerTitle="Select date"></DatePickerField> |
41 | 41 | <TimePickerField locale="en_US" hint="select time" pickerOkText="OK" |
42 | 42 | pickerCancelText="Cancel" pickerTitle="Select time"></TimePickerField> |
43 | 43 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
44 | 44 |
|
45 | | - <Label text="preferred locale: de_DE" class="content" android:paddingLeft="4"></Label> |
| 45 | + <Label text="preferred locale: de_DE" class="content"></Label> |
46 | 46 | <DatePickerField locale="de_DE" hint="datum auswählen" pickerOkText="Bestätigen" |
47 | 47 | pickerCancelText="Stornieren" pickerTitle="Datum auswählen"></DatePickerField> |
48 | 48 | <TimePickerField locale="de_DE" hint="zeit wählen" pickerOkText="Bestätigen" |
49 | 49 | pickerCancelText="Stornieren" pickerTitle="Zeit wählen"></TimePickerField> |
50 | 50 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
51 | 51 |
|
52 | | - <Label text="custom format" class="content" android:paddingLeft="4"></Label> |
| 52 | + <Label text="custom format" class="content"></Label> |
53 | 53 | <DatePickerField date="2019/02/24" dateFormat="'date': dd MMMM yyyy"></DatePickerField> |
54 | 54 | <TimePickerField time="01:00" timeFormat="'time': HH:mm"></TimePickerField> |
55 | 55 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
56 | 56 |
|
57 | | - <Label text="binding" class="content" android:paddingLeft="4"></Label> |
58 | | - <Label :text="dateTime" android:paddingLeft="4"></Label> |
| 57 | + <Label text="binding" class="content"></Label> |
| 58 | + <Label :text="dateTime" color="#CBCBCB"></Label> |
59 | 59 | <DatePickerField @dateChange="onDateTimeChange" :date="dateTime"></DatePickerField> |
60 | 60 | <TimePickerField @timeChange="onDateTimeChange" :time="dateTime"></TimePickerField> |
61 | 61 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
62 | 62 |
|
63 | | - <Label text="css applied" class="content" android:paddingLeft="4"></Label> |
| 63 | + <Label text="css applied" class="content"></Label> |
64 | 64 | <DatePickerField date="2019/02/24" pickerTitle="select date" class="apply-css"></DatePickerField> |
65 | 65 | <TimePickerField time="01:00" pickerTitle="select time" class="apply-css"></TimePickerField> |
66 | 66 | <StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout> |
67 | 67 |
|
68 | | - <Label text="custom button" class="content" android:paddingLeft="4"></Label> |
| 68 | + <Label text="custom button" class="content"></Label> |
69 | 69 | <Button :text="dateText" @tap="onPickDateTap"></Button> |
70 | 70 | <Button :text="timeText" @tap="onPickTimeTap"></Button> |
71 | 71 | </StackLayout> |
|
161 | 161 | color: #303F9F; |
162 | 162 | } |
163 | 163 |
|
| 164 | + label { |
| 165 | + padding: 6 4; |
| 166 | + } |
| 167 | +
|
| 168 | + timepickerfield, |
| 169 | + datepickerfield { |
| 170 | + padding: 12 4; |
| 171 | + } |
| 172 | +
|
164 | 173 | timepickerfield.apply-css, |
165 | 174 | datepickerfield.apply-css { |
166 | 175 | color: #CDDC39; |
|
0 commit comments