feat(datepicker): ability to show time via showTime property (#9570)

apps/toolbox/project.json

@@ -17,13 +17,15 @@
 		"ios": {
 			"executor": "@nativescript/nx:build",
 			"options": {
-				"platform": "ios"
+				"platform": "ios",
+				"noHmr": true
 			}
 		},
 		"android": {
 			"executor": "@nativescript/nx:build",
 			"options": {
-				"platform": "android"
+				"platform": "android",
+				"noHmr": true
 			}
 		},
 		"clean": {

apps/toolbox/src/main-page.xml

@@ -9,6 +9,7 @@
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+         <Button text="datepicker" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="image-handling" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

apps/toolbox/src/pages/a11y.ts

@@ -26,10 +26,10 @@ export class AccessibilityModel extends Observable {
 	checkedChange(args) {
 		const checked = (args.object as Switch).checked;
 		console.log(checked);
-		this.set('switchCheckedText', `${this.labelText} ${checked}`);
+		this.notifyPropertyChange('switchCheckedText', `${this.labelText} ${checked}`);
 
 		// prettier-ignore
-		this.set('largeImageSrc', checked ? 
+		this.notifyPropertyChange('largeImageSrc', checked ? 
 			'https://i.picsum.photos/id/669/5000/5000.jpg?hmac=VlpchW0ODhflKm0SKOYQrc8qysLWbqKmDS1MGT9apAc' : 
 			'https://i.picsum.photos/id/684/5000/5000.jpg?hmac=loiXO_OQ-y86XY_hc7p3qJdY39fSd9CuDM0iA_--P4Q');
 	}

apps/toolbox/src/pages/datepicker.ts

@@ -0,0 +1,31 @@
+import { Page, ImageSource, Observable, EventData, knownFolders, path, Switch, DatePicker } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SampleData();
+}
+
+export class SampleData extends Observable {
+	displayDate = {
+		day: new Date().getDate(),
+		month: new Date().getMonth(),
+		year: new Date().getFullYear(),
+		hour: new Date().getHours(),
+		minute: new Date().getMinutes(),
+		second: new Date().getSeconds(),
+	};
+	showTime = true;
+
+	dateChange(args) {
+		console.log('dateChange:', (<DatePicker>args.object).date);
+	}
+
+	checkedChange(args) {
+		const checked = (args.object as Switch).checked;
+		this.showTime = checked;
+		console.log('this.showTime:', this.showTime);
+		this.notifyPropertyChange('showTime', this.showTime);
+	}
+}

apps/toolbox/src/pages/datepicker.xml

@@ -0,0 +1,20 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="DatePicker" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+<!--dateChange="{{onDateChanged}}"
+year="{{displayDate?.year}}"
+        month="{{displayDate?.month}}"
+        day="{{displayDate?.day}}"
+        hour="{{displayDate?.hour}}"
+        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 }}" />
+      <GridLayout rows="auto" columns="auto,*">
+        <Switch checked="true" col="0" checkedChange="{{checkedChange}}" />
+        <Label text="Show Time" col="1" class="m-l-10" />
+      </GridLayout>
+    </StackLayout>
+</Page>

apps/toolbox/src/pages/image-async.ts

@@ -22,12 +22,12 @@ export class SampleData extends Observable {
 			const saved = results[0];
 			const base64Result = results[1];
 			if (saved) {
-				this.set('savedData', tempFile);
+				this.notifyPropertyChange('savedData', tempFile);
 				console.log('ImageAsset saved', saved, tempFile);
 			}
 			console.log('base64', base64Result);
 			console.log(results[2].width, results[2].height);
-			this.set('resizedImage', results[2]);
+			this.notifyPropertyChange('resizedImage', results[2]);
 		} catch (e) {
 			console.log('Failed to save ImageAsset');
 		}

apps/toolbox/src/pages/visibility-vs-hidden.ts

@@ -21,12 +21,12 @@ export class VisibilityVsHiddenModel extends Observable {
 		if (this.currentVisibilityIndex === 3) {
 			this.currentVisibilityIndex = 0;
 		}
-		this.set('currentVisibility', this.visibilityOptions[this.currentVisibilityIndex]);
-		this.set('currentVisibilityType', `Current Visibility: ${this.visibilityOptions[this.currentVisibilityIndex]}`);
+		this.notifyPropertyChange('currentVisibility', this.visibilityOptions[this.currentVisibilityIndex]);
+		this.notifyPropertyChange('currentVisibilityType', `Current Visibility: ${this.visibilityOptions[this.currentVisibilityIndex]}`);
 	}
 
 	toggleHidden() {
-		this.set('currentHidden', !this.currentHidden);
-		this.set('currentHiddenType', `Current Hidden: ${this.currentHidden}`);
+		this.notifyPropertyChange('currentHidden', !this.currentHidden);
+		this.notifyPropertyChange('currentHiddenType', `Current Hidden: ${this.currentHidden}`);
 	}
 }

apps/ui/project.json

@@ -17,13 +17,15 @@
 		"ios": {
 			"executor": "@nativescript/nx:build",
 			"options": {
-				"platform": "ios"
+				"platform": "ios",
+				"noHmr": true
 			}
 		},
 		"android": {
 			"executor": "@nativescript/nx:build",
 			"options": {
-				"platform": "android"
+				"platform": "android",
+				"noHmr": true
 			}
 		},
 		"clean": {