javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 01:43:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datepicker): max, min and date value binding handling (#10343)

Browse Source
This commit is contained in:
Nathan Walker
2023-07-17 12:19:20 -07:00
committed by GitHub
parent 08049340b5
commit 6effd554f2
4 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/toolbox/src/pages/datepicker.ts
View File

@ -8,6 +8,8 @@ export function navigatingTo(args: EventData) {
}
export class SampleData extends Observable {
minDate = new Date();
maxDate = new Date(2030, 7, 1);
displayDate = {
day: new Date().getDate(),
month: new Date().getMonth(),
@ -18,6 +20,15 @@ export class SampleData extends Observable {
};
showTime = true;
constructor() {
super();
// setTimeout(() => {
// // test dynamic min and max date changes
// this.notifyPropertyChange('minDate', null);
// this.notifyPropertyChange('maxDate', null);
// }, 2000);
}
dateChange(args) {
console.log('dateChange:', (<DatePicker>args.object).date);
}

2
apps/toolbox/src/pages/datepicker.xml
View File

@ -11,7 +11,7 @@ year="{{displayDate?.year}}"
minute="{{displayDate?.minute}}"
second="{{{{displayDate?.second}}"-->
<StackLayout padding="20">
<DatePicker class="v-center text-center" width="{{ showTime ? 220 : 300}}" height="{{ showTime ? 100 : 250}}" showTime="{{ showTime }}" iosPreferredDatePickerStyle="{{showTime ? 2 : 1}}" dateChange="{{ dateChange }}" />
<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 }}" />
<GridLayout rows="auto" columns="auto,*">
<Switch checked="true" col="0" checkedChange="{{checkedChange}}" />
<Label text="Show Time" col="1" class="m-l-10" />

2
packages/core/ui/date-picker/index.android.ts
View File

@ -130,7 +130,7 @@ export class DatePicker extends DatePickerBase {
[dateProperty.setNative](value: Date) {
const nativeView = this.nativeViewProtected;
if (nativeView.getDayOfMonth() !== value.getDate() || nativeView.getMonth() !== value.getMonth() || nativeView.getYear() !== value.getFullYear()) {
if (value && (nativeView.getDayOfMonth() !== value.getDate() || nativeView.getMonth() !== value.getMonth() || nativeView.getYear() !== value.getFullYear())) {
nativeView.updateDate(value.getFullYear(), value.getMonth(), value.getDate());
}
}

48
packages/core/ui/date-picker/index.ios.ts
View File

@ -79,39 +79,45 @@ export class DatePicker extends DatePickerBase {
}
[dateProperty.setNative](value: Date) {
const picker = this.nativeViewProtected;
const comps = NSCalendar.currentCalendar.componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay | NSCalendarUnit.HourCalendarUnit | NSCalendarUnit.MinuteCalendarUnit | NSCalendarUnit.SecondCalendarUnit, picker.date);
comps.year = value.getFullYear();
comps.month = value.getMonth() + 1;
comps.day = value.getDate();
comps.hour = value.getHours();
comps.minute = value.getMinutes();
comps.second = value.getSeconds();
this.year = comps.year;
this.month = comps.month;
this.day = comps.day;
this.hour = comps.hour;
this.minute = comps.minute;
this.second = comps.second;
picker.setDateAnimated(NSCalendar.currentCalendar.dateFromComponents(comps), false);
if (value) {
const comps = NSCalendar.currentCalendar.componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay | NSCalendarUnit.HourCalendarUnit | NSCalendarUnit.MinuteCalendarUnit | NSCalendarUnit.SecondCalendarUnit, this.nativeViewProtected.date);
comps.year = value.getFullYear();
comps.month = value.getMonth() + 1;
comps.day = value.getDate();
comps.hour = value.getHours();
comps.minute = value.getMinutes();
comps.second = value.getSeconds();
this.year = comps.year;
this.month = comps.month;
this.day = comps.day;
this.hour = comps.hour;
this.minute = comps.minute;
this.second = comps.second;
this.nativeViewProtected.setDateAnimated(NSCalendar.currentCalendar.dateFromComponents(comps), false);
}
}
[maxDateProperty.getDefault](): Date {
return this.nativeViewProtected.maximumDate;
}
[maxDateProperty.setNative](value: Date) {
const picker = this.nativeViewProtected;
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
picker.maximumDate = <any>nsDate;
if (value) {
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
this.nativeViewProtected.maximumDate = <any>nsDate;
} else {
this.nativeViewProtected.maximumDate = null;
}
}
[minDateProperty.getDefault](): Date {
return this.nativeViewProtected.minimumDate;
}
[minDateProperty.setNative](value: Date) {
const picker = this.nativeViewProtected;
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
picker.minimumDate = <any>nsDate;
if (value) {
this.nativeViewProtected.minimumDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000) as any;
} else {
this.nativeViewProtected.minimumDate = null;
}
}
[colorProperty.getDefault](): UIColor {