docs: cleanup TimePicker

Author: rigor789

content/screenshots/android/TimePicker.png

@@ -8,254 +8,105 @@ title: TimePicker
 
 See also: [DatePicker](/ui/date-picker).
 
----
-
 <DeviceFrame type="ios">
-<img  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/TimePicker.png"/>
+<img src="../screenshots/ios/TimePicker.png"/>
 </DeviceFrame>
 <DeviceFrame type="android">
-<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/TimePicker.png" />
+<img src="../screenshots/android/TimePicker.png"/>
 </DeviceFrame>
 
-## Creating a simple TimePicker
-
-To listen to time change event, handle the `timeChange` event in the `loaded` event handler of the `<TimePicker>`
-
-<!-- /// flavor plain -->
-
-```xml
-<TimePicker
-  hour="10"
-  minute="25"
-  loaded="onPickerLoaded"
-/>
-```
-
-```ts
-import { TimePicker } from '@nativescript/core'
-
-export function onPickerLoaded(args) {
-  const timePicker = args.object as TimePicker
-
-  // Configurable properties of TimePicker
-  timePicker.hour = 10
-  timePicker.minute = 25
-  timePicker.minuteInterval = 5
-  timePicker.minHour = 7
-  timePicker.maxHour = 11
-  timePicker.minMinute = 10
-  timePicker.maxMinute = 45
-
-  timePicker.on('timeChange', (data: PropertyChangeData) => {
-    // data is of type PropertyChangeData
-    console.log('Picked TIME: ', data.value)
-    console.log('Previous TIME: ', data.oldValue)
-  })
-}
-```
-
-<!-- ///
-
-/// flavor angular
-
-```xml
-<TimePicker
-  hour="9"
-  minute="25"
-  maxHour="23"
-  maxMinute="59"
-  minuteInterval="5"
-  (timeChange)="onTimeChanged($event)"
->
-</TimePicker>
-```
-
-```ts
-import { Component } from '@angular/core'
-import { TimePicker } from '@nativescript/core'
-
-@Component({
-  moduleId: module.id,
-  templateUrl: './usage.component.html'
-})
-export class UsageComponent {
-  todayObj: Date = new Date()
-
-  onTimeChanged(args) {
-    const tp = args.object as TimePicker
-
-    const time = args.value
-    console.log(`Chosen time: ${time}`)
-  }
-}
-```
-
-///
-
-/// flavor vue
-
-```xml
-<TimePicker :hour="selectedHour" :minute="selectedMinute" />
-```
-
-`<TimePicker>` provides two-way data binding using `v-model`.
-
-```xml
-<TimePicker v-model="selectedTime" />
-```
-
-///
-
-/// flavor svelte
-
-```tsx
-<timePicker hour="{selectedHour}" minute="{selectedMinute}" />
-```
-
-`<timePicker>` provides two-way data binding using `bind`.
-
-```xml
-<timePicker bind:time="{selectedTime}" />
-```
-
-///
-
-/// flavor react
-
-```tsx
-<timePicker hour={selectedHour} minute={selectedMinute} />
-```
-
-/// -->
+<<< @/../examples/src/ui/TimePicker/template.xml#example
 
 ## Props
 
 ### hour
 
-```xml
-<TimePicker hour="10"/>
-```
-
 ```ts
-timePicker.hour = 10
+hour: number
 ```
 
 Gets or sets the selected hour.
 
----
+Defaults to current hour.
 
 ### minute
 
-```xml
-<TimePicker minute="10"/>
-```
-
 ```ts
-timePicker.minute = 25
+minute: number
 ```
 
 Gets or sets the selected minute.
 
----
+Defaults to current minute.
 
 ### time
 
 ```ts
-time: Date = timePicker.time
+time: Date
 ```
 
 Gets or sets the selected time.
 
----
+Defaults to current time.
 
 ### minHour
 
-```xml
-<TimePicker minHour="7"/>
-```
-
 ```ts
-timePicker.minHour = 7
+minHour: number
 ```
 
 Gets or sets the minimum selectable hour.
 
----
-
 ### maxHour
 
-```xml
-<TimePicker maxHour="7"/>
-```
-
 ```ts
-timePicker.maxHour = 11
+maxHour: number
 ```
 
 Gets or sets the maximum selectable hour.
 
----
-
 ### minMinute
 
-```xml
-<TimePicker minMinute="10"/>
-```
-
 ```ts
-timePicker.minMinute = 10
+minMinute: number
 ```
 
 Gets or sets the minimum selectable minute.
 
----
-
 ### maxMinute
 
-```xml
-<TimePicker maxMinute="45"/>
-```
-
 ```ts
-timePicker.maxMinute = 45
+maxMinute: number
 ```
 
 Gets or sets the maximum selectable minute.
 
----
-
 ### minuteInterval
 
-```xml
-<TimePicker minuteInterval="45"/>
-```
-
 ```ts
-timePicker.minuteInterval = 45
+minuteInterval: number
 ```
 
-Gets or sets the selectable minute interval. `Default`:`1`.
+Gets or sets the selectable minute interval.
 
----
+Defaults to `1`.
 
 ### ...Inherited
 
-For additional inherited properties not shown, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/timepicker) |
+For additional inherited properties not shown, refer to the [API Reference](/api/class/TimePicker)
 
 ## Events
 
 ### timeChange
 
 ```ts
-timePicker.on('timeChange', (data: PropertyChangeData) => {
-  console.log('Picked TIME: ', data.value)
-  console.log('Previous TIME: ', data.oldValue)
+on('timeChange', (args: PropertyChangeData) => {
+  const timePicker = args.object as TimePicker
+  console.log('Picked time:', data.value)
 })
 ```
 
-Emitted when the selected time changes. See the [PropertyChangeData](https://docs.nativescript.org/api-reference/interfaces/propertychangedata) interface for available event data properties.
-
----
+Emitted when the selected time changes.
 
 ## Native component
 

content/screenshots/ios/TimePicker.png

@@ -0,0 +1,13 @@
+<Page>
+  <GridLayout>
+    <ContentView verticalAlignment="center" horizontalAlignment="center">
+      <TimePicker hour="9" minute="41" />
+    </ContentView>
+
+    <ContentView visibility="collapsed">
+      <!-- #region example -->
+      <TimePicker />
+      <!-- #endregion example -->
+    </ContentView>
+  </GridLayout>
+</Page>