Date-time picker on iOS


#1

Any idea any idea how I can access the native iOS date & timepicker via nativescript ?
Found this plugin https://www.npmjs.com/package/nativescript-timedatepicker but it uses actionsheet.


#2

The tns-core-modules provide a basic date-picker (http://docs.nativescript.org/cookbook/ui/date-picker) which you can access the underlying native element of, by calling its ios | android property.


#3

Yeah, I however, need both the date and timepicker. Something like this: 00 PM


#4

Hey @neddinn, In this case you can use Nativescript’s widgets Time Picker and Date Picker. By using this you can access the native widgets by calling its native property.

Then you can try to combine both in a modal page and inject that modal to the component and call that datatime picker method where ever you want.

FYI,
modal page may look like,

app.component.html

<StackLayout class="datetimepic-commonall-stack">

<StackLayout sdkExampleTitle sdkToggleNavButton>
<Label class="m-15 h2 text-center" text="Select Date" textWrap="true" ></Label>
<DatePicker id="datePicker" ></DatePicker>
</StackLayout>
<StackLayout>
<Label class="m-15 h2 text-center" text="Select Time" textWrap="true" ></Label>
<TimePicker id="timePicker" verticalAlignment="center" class="m-15"></TimePicker>
</StackLayout>

<StackLayout class="dtpicbtns" columns="*,*" rows="*"> 
    <Button col="0" row="0" text="Set" (tap)="submit()"></Button>
    <Button col="1" row="0" text="Clear" (tap)="clear()"></Button>
</StackLayout>

</StackLayout>

Have a look at this thread for more idea on this.

This is how i have implemented the datetimepicker.


#5

Thanks @kumaran, I was actually looking for something that looked exactly like the native datetimepicker. I figured a way out, which was by natively changing the default mode on the datepicker, so I have something like this:

datepicker.ios.datePickerMode = UIDatePickerModeDateAndTime;

The major problem with this is listening to a time event change.