javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +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 { export class SampleData extends Observable {
minDate = new Date();
maxDate = new Date(2030, 7, 1);
displayDate = { displayDate = {
day: new Date().getDate(), day: new Date().getDate(),
month: new Date().getMonth(), month: new Date().getMonth(),
@ -18,6 +20,15 @@ export class SampleData extends Observable {
}; };
showTime = true; showTime = true;
constructor() {
super();
// setTimeout(() => {
// // test dynamic min and max date changes
// this.notifyPropertyChange('minDate', null);
// this.notifyPropertyChange('maxDate', null);
// }, 2000);
}
dateChange(args) { dateChange(args) {
console.log('dateChange:', (<DatePicker>args.object).date); 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}}" minute="{{displayDate?.minute}}"
second="{{{{displayDate?.second}}"--> second="{{{{displayDate?.second}}"-->
<StackLayout padding="20"> <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,*"> <GridLayout rows="auto" columns="auto,*">
<Switch checked="true" col="0" checkedChange="{{checkedChange}}" /> <Switch checked="true" col="0" checkedChange="{{checkedChange}}" />
<Label text="Show Time" col="1" class="m-l-10" /> <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) { [dateProperty.setNative](value: Date) {
const nativeView = this.nativeViewProtected; 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()); 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) { [dateProperty.setNative](value: Date) {
const picker = this.nativeViewProtected; if (value) {
const comps = NSCalendar.currentCalendar.componentsFromDate(NSCalendarUnit.CalendarUnitYear | NSCalendarUnit.CalendarUnitMonth | NSCalendarUnit.CalendarUnitDay | NSCalendarUnit.HourCalendarUnit | NSCalendarUnit.MinuteCalendarUnit | NSCalendarUnit.SecondCalendarUnit, picker.date); 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.year = value.getFullYear();
comps.month = value.getMonth() + 1; comps.month = value.getMonth() + 1;
comps.day = value.getDate(); comps.day = value.getDate();
comps.hour = value.getHours(); comps.hour = value.getHours();
comps.minute = value.getMinutes(); comps.minute = value.getMinutes();
comps.second = value.getSeconds(); comps.second = value.getSeconds();
this.year = comps.year; this.year = comps.year;
this.month = comps.month; this.month = comps.month;
this.day = comps.day; this.day = comps.day;
this.hour = comps.hour; this.hour = comps.hour;
this.minute = comps.minute; this.minute = comps.minute;
this.second = comps.second; this.second = comps.second;
picker.setDateAnimated(NSCalendar.currentCalendar.dateFromComponents(comps), false); this.nativeViewProtected.setDateAnimated(NSCalendar.currentCalendar.dateFromComponents(comps), false);
}
} }
[maxDateProperty.getDefault](): Date { [maxDateProperty.getDefault](): Date {
return this.nativeViewProtected.maximumDate; return this.nativeViewProtected.maximumDate;
} }
[maxDateProperty.setNative](value: Date) { [maxDateProperty.setNative](value: Date) {
const picker = this.nativeViewProtected; if (value) {
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000); const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000);
picker.maximumDate = <any>nsDate; this.nativeViewProtected.maximumDate = <any>nsDate;
} else {
this.nativeViewProtected.maximumDate = null;
}
} }
[minDateProperty.getDefault](): Date { [minDateProperty.getDefault](): Date {
return this.nativeViewProtected.minimumDate; return this.nativeViewProtected.minimumDate;
} }
[minDateProperty.setNative](value: Date) { [minDateProperty.setNative](value: Date) {
const picker = this.nativeViewProtected; if (value) {
const nsDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000); this.nativeViewProtected.minimumDate = NSDate.dateWithTimeIntervalSince1970(value.getTime() / 1000) as any;
picker.minimumDate = <any>nsDate; } else {
this.nativeViewProtected.minimumDate = null;
}
} }
[colorProperty.getDefault](): UIColor { [colorProperty.getDefault](): UIColor {