fix(time-picker): properly handle 0 on hour and minutes with valueChanged (#10460)

NathanWalker · web-flow · commit 4762699fa19f · 2023-12-17T15:17:32.000-08:00
closes #10457
diff --git a/apps/automated/src/ui/time-picker/time-picker-tests.ts b/apps/automated/src/ui/time-picker/time-picker-tests.ts
@@ -197,13 +197,27 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
 		TKUnit.assertEqual(actualValue, expectedValue);
 	}
 
+	public testHourZeroFromLocalToNative() {
+		let expectedValue = 0;
+		this.testView.hour = expectedValue;
+		let actualValue = timePickerTestsNative.getNativeHour(this.testView);
+		TKUnit.assertEqual(actualValue, expectedValue);
+	}
+
 	public testMinuteFromLocalToNative() {
 		let expectedValue = 59;
 		this.testView.minute = expectedValue;
 		let actualValue = timePickerTestsNative.getNativeMinute(this.testView);
 		TKUnit.assertEqual(actualValue, expectedValue);
 	}
 
+	public testMinuteZeroFromLocalToNative() {
+		let expectedValue = 0;
+		this.testView.minute = expectedValue;
+		let actualValue = timePickerTestsNative.getNativeMinute(this.testView);
+		TKUnit.assertEqual(actualValue, expectedValue);
+	}
+
 	public testHourFromNativeToLocal() {
 		let expectedValue = 14;
 		timePickerTestsNative.setNativeHour(this.testView, expectedValue);
diff --git a/apps/toolbox/src/pages/datepicker.ts b/apps/toolbox/src/pages/datepicker.ts
@@ -10,6 +10,8 @@ export function navigatingTo(args: EventData) {
 export class SampleData extends Observable {
 	minDate = new Date();
 	maxDate = new Date(2030, 7, 1);
+	hour = 8;
+	minute = 0;
 	displayDate = {
 		day: new Date().getDate(),
 		month: new Date().getMonth(),
diff --git a/apps/toolbox/src/pages/datepicker.xml b/apps/toolbox/src/pages/datepicker.xml
@@ -16,5 +16,9 @@ year="{{displayDate?.year}}"
         <Switch checked="true" col="0" checkedChange="{{checkedChange}}" />
         <Label text="Show Time" col="1" class="m-l-10" />
       </GridLayout>
+      <GridLayout rows="auto,auto" columns="">
+          <Label text="Time Picker standalone:" row="0" col="0" class="m-t-10" />
+          <TimePicker row="1" hour="{{hour}}" minute="{{minute}}"></TimePicker>
+      </GridLayout>
     </StackLayout>
 </Page>
diff --git a/packages/core/ui/time-picker/time-picker-common.ts b/packages/core/ui/time-picker/time-picker-common.ts
@@ -165,8 +165,11 @@ minuteIntervalProperty.register(TimePickerBase);
 
 export const minuteProperty = new Property<TimePickerBase, number>({
 	name: 'minute',
-	defaultValue: 0,
+	// avoid defaultValue of 0 because it will prevent valueChanged from firing to initialize value due to it already matching defaultValue to start
+	// sometimes user needs to set 0: https://github.com/NativeScript/NativeScript/issues/10457
+	defaultValue: null,
 	valueChanged: (picker, oldValue, newValue) => {
+		newValue = newValue || 0;
 		if (!isMinuteValid(newValue) || !isValidTime(picker)) {
 			throw new Error(getErrorMessage(picker, 'minute', newValue));
 		}
@@ -179,8 +182,11 @@ minuteProperty.register(TimePickerBase);
 
 export const hourProperty = new Property<TimePickerBase, number>({
 	name: 'hour',
-	defaultValue: 0,
+	// avoid defaultValue of 0 because it will prevent valueChanged from firing to initialize value due to it already matching defaultValue to start
+	// sometimes user needs to set 0: https://github.com/NativeScript/NativeScript/issues/10457
+	defaultValue: null,
 	valueChanged: (picker, oldValue, newValue) => {
+		newValue = newValue || 0;
 		if (!isHourValid(newValue) || !isValidTime(picker)) {
 			throw new Error(getErrorMessage(picker, 'Hour', newValue));
 		}
