Skip to content

Commit 6effd55

Browse files
NathanWalkerNathanWalker
authored
fix(datepicker): max, min and date value binding handling (#10343)
1 parent 0804934 commit 6effd55

File tree

4 files changed

+40
-23
lines changed

4 files changed

+40
-23
lines changed

‎apps/toolbox/src/pages/datepicker.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export function navigatingTo(args: EventData) {
88
}
99

1010
export class SampleData extends Observable {
11+
minDate = new Date();
12+
maxDate = new Date(2030, 7, 1);
1113
displayDate = {
1214
day: new Date().getDate(),
1315
month: new Date().getMonth(),
@@ -18,6 +20,15 @@ export class SampleData extends Observable {
1820
};
1921
showTime = true;
2022

23+
constructor() {
24+
super();
25+
// setTimeout(() => {
26+
// // test dynamic min and max date changes
27+
// this.notifyPropertyChange('minDate', null);
28+
// this.notifyPropertyChange('maxDate', null);
29+
// }, 2000);
30+
}
31+
2132
dateChange(args) {
2233
console.log('dateChange:', (<DatePicker>args.object).date);
2334
}

‎apps/toolbox/src/pages/datepicker.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ year="{{displayDate?.year}}"
1111
minute="{{displayDate?.minute}}"
1212
second="{{{{displayDate?.second}}"-->
1313
<StackLayout padding="20">
14-
<DatePicker class="v-center text-center" width="{{ showTime ? 220 : 300}}" height="{{ showTime ? 100 : 250}}" showTime="{{ showTime }}" iosPreferredDatePickerStyle="{{showTime ? 2 : 1}}" dateChange="{{ dateChange }}" />
14+
<DatePicker class="v-center text-center" width="{{ showTime ? 220 : 300}}" height="{{ showTime ? 100 : 250}}" minDate="{{minDate}}" maxDate="{{maxDate}}" showTime="{{ showTime }}" iosPreferredDatePickerStyle="{{showTime ? 2 : 1}}" dateChange="{{ dateChange }}" />
1515
<GridLayout rows="auto" columns="auto,*">
1616
<Switch checked="true" col="0" checkedChange="{{checkedChange}}" />
1717
<Label text="Show Time" col="1" class="m-l-10" />

‎packages/core/ui/date-picker/index.android.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export class DatePicker extends DatePickerBase {
130130

131131
[dateProperty.setNative](value: Date) {
132132
const nativeView = this.nativeViewProtected;
133-
if (nativeView.getDayOfMonth() !== value.getDate() || nativeView.getMonth() !== value.getMonth() || nativeView.getYear() !== value.getFullYear()) {
133+
if (value && (nativeView.getDayOfMonth() !== value.getDate() || nativeView.getMonth() !== value.getMonth() || nativeView.getYear() !== value.getFullYear())) {
134134
nativeView.updateDate(value.getFullYear(), value.getMonth(), value.getDate());
135135
}
136136
}

‎packages/core/ui/date-picker/index.ios.ts

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -79,39 +79,45 @@ export class DatePicker extends DatePickerBase {
7979
}
8080

8181
[dateProperty.setNative](value: Date) {
82-
const picker = this.nativeViewProtected;
83-
const comps = NSCalendar.currentCalendar.componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay | NSCalendarUnit.HourCalendarUnit | NSCalendarUnit.MinuteCalendarUnit | NSCalendarUnit.SecondCalendarUnit, picker.date);
84-
comps.year = value.getFullYear();
85-
comps.month = value.getMonth() + 1;
86-
comps.day = value.getDate();
87-
comps.hour = value.getHours();
88-
comps.minute = value.getMinutes();
89-
comps.second = value.getSeconds();
90-
this.year = comps.year;
91-
this.month = comps.month;
92-
this.day = comps.day;
93-
this.hour = comps.hour;
94-
this.minute = comps.minute;
95-
this.second = comps.second;
96-
picker.setDateAnimated(NSCalendar.currentCalendar.dateFromComponents(comps), false);
82+
if (value) {
83+
const comps = NSCalendar.currentCalendar.componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay | NSCalendarUnit.HourCalendarUnit | NSCalendarUnit.MinuteCalendarUnit | NSCalendarUnit.SecondCalendarUnit, this.nativeViewProtected.date);
84+
comps.year = value.getFullYear();
85+
comps.month = value.getMonth() + 1;
86+
comps.day = value.getDate();
87+
comps.hour = value.getHours();
88+
comps.minute = value.getMinutes();
89+
comps.second = value.getSeconds();
90+
this.year = comps.year;
91+
this.month = comps.month;
92+
this.day = comps.day;
93+
this.hour = comps.hour;
94+
this.minute = comps.minute;
95+
this.second = comps.second;
96+
this.nativeViewProtected.setDateAnimated(NSCalendar.currentCalendar.dateFromComponents(comps), false);
97+
}
9798
}
9899

99100
[maxDateProperty.getDefault](): Date {
100101
return this.nativeViewProtected.maximumDate;
101102
}
102103
[maxDateProperty.setNative](value: Date) {
103-
const picker = this.nativeViewProtected;
104-
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
105-
picker.maximumDate = <any>nsDate;
104+
if (value) {
105+
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
106+
this.nativeViewProtected.maximumDate = <any>nsDate;
107+
} else {
108+
this.nativeViewProtected.maximumDate = null;
109+
}
106110
}
107111

108112
[minDateProperty.getDefault](): Date {
109113
return this.nativeViewProtected.minimumDate;
110114
}
111115
[minDateProperty.setNative](value: Date) {
112-
const picker = this.nativeViewProtected;
113-
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
114-
picker.minimumDate = <any>nsDate;
116+
if (value) {
117+
this.nativeViewProtected.minimumDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000) as any;
118+
} else {
119+
this.nativeViewProtected.minimumDate = null;
120+
}
115121
}
116122

117123
[colorProperty.getDefault](): UIColor {

0 commit comments

Comments
 (0)