Date time picker for ionic

ionic-v1
1

Hello everyone, Have anyone come across a good date and time picker to use in an ionic project?

1 Like
2

There something a ionic forum user made:

But i have to say: use the cordova plugin to use the native date and time pickers.

or lay something stylish over your date and time inputs (set them to invisible) so if you click on your stylisch button or label the click/touch reaches the hidden inputs and they are triggering the native components.

3

I suggest you use ng-cordova.

1 Like
4

thank you everyone for the quick reply. Both suggestions are to use separate date picker and a time picker. I was thinking it would be great to have both these together (like in iOS calendar events) which is very user friendly. I will take a look at the cordova plugin to use native date time pickers. Thanks again !

5

Hi @igk, I have created both time picker and date picker for ionic frame works.
No additional dependencies like jQuery is not required. Hope this might help you. Please have a look at the below links.

ionic-timepicker demo

ionic-timepicker Bower component

ionic-datepicker demo

ionic-datepicker Bower component

6

thanks @rajeshwarpatlolla

@bengtler , @marcobroccio the cordova plugin is cool and working smoothly. The issue with it is that it only provides a date picker. In my case I need a time picker too. Any suggestions?
(consider a scenario where user is creating a reminder)

7

You mean two at a time one after the other?

8

either way. Your implementation is cool. But I’m searching for something more closer to what user gets natively. If I could find a plugin that exposes native time picker component, that will do.

9

SORTED! ohh I missed to put datetime. To save the trouble for others the code is:

var options = {
date: new Date(),
mode: ‘datetime’
};

datePicker.show(options, function(date){
alert("date result " + date);
});

10

@igk

NgCordova DatePicker allow you to set the ‘Time Mode’, so:

var options = {
date: new Date(),
mode: ‘date’, // or ‘time’ // TIME HERE
minDate: new Date() - 10000,
allowOldDates: true,
allowFutureDates: false,
doneButtonLabel: ‘DONE’,
doneButtonColor: ‘#F2F3F4’,
cancelButtonLabel: ‘CANCEL’,
cancelButtonColor: ‘#000000’
};

11

Hi, I’ve created a new component which is more UX oriented and has more of a native feel to it .

If anyone is interested, it can be seen at:

Hope this helps,
Thanks

12

@marcobroccio, I tried ngCordova’s date/time picker out. Frankly, I found it kind of hard to use. It doesn’t seem to be angular aware at all. I also couldn’t get it to update the model properly. It’s also a drag that it can’t function in an emulator, like most datepickers. I’d prefer something that understood ng-model. I’m going to continue the search.

13

try this if anyone needs: