From 4762699fa19fb81a766310724ad2cf0741b105c3 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Sun, 17 Dec 2023 15:17:32 -0800
Subject: [PATCH] fix(time-picker): properly handle 0 on hour and minutes with
 valueChanged (#10460)

closes https://github.com/NativeScript/NativeScript/issues/10457
---
 .../src/ui/time-picker/time-picker-tests.ts        | 14 ++++++++++++++
 apps/toolbox/src/pages/datepicker.ts               |  2 ++
 apps/toolbox/src/pages/datepicker.xml              |  4 ++++
 packages/core/ui/time-picker/time-picker-common.ts | 10 ++++++++--
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/automated/src/ui/time-picker/time-picker-tests.ts b/apps/automated/src/ui/time-picker/time-picker-tests.ts
index e7af6b34c..6de5aafbe 100644
--- a/apps/automated/src/ui/time-picker/time-picker-tests.ts
+++ b/apps/automated/src/ui/time-picker/time-picker-tests.ts
@@ -197,6 +197,13 @@ 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;
@@ -204,6 +211,13 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
 		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
index 6249f43cc..2e75bc696 100644
--- 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
index 8f1419909..552183b43 100644
--- 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
index 92913a3bd..115d84554 100644
--- 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));
 		}