Date Picker for Ionic

ionic-v1
1

Hi , In my app i need to include a datepicker. Although there are many plugins available but it would be great to have datepicker in Ionic’s core framework.

2

Have you looked into using the HTML5 input types, like date?
http://mobileinputtypes.com/

5 Likes
3

Yes but it only works for ios :smile:
http://caniuse.com/input-datetime

And phonegap plugins are generally android or ios specific (except this one https://build.phonegap.com/plugins/466).
But i cannot make it work properly.

Can’t wait a proper support like for kit kat version, because it is a very annoying problem ^^

4

On phonegap you can use these https://github.com/VitaliiBlagodir/cordova-plugin-datepicker‎. They are supposed to work on both ios and android although I have only tested on android.

5

Your link is broken (some extra %E2%80%8E at the end). So follow me: https://github.com/VitaliiBlagodir/cordova-plugin-datepicker

6

Anyone have luck with the VitaliiBlagodir plugin? I’m getting some errors trying to implement it. Just curious before I get dig into it deeper. Thanks.

8

Hi Saurabh,
Please can you provide me the instructions how you installed and implemented this plug in your application.
I have downloaded it however no idea how to integrate this in application.

9

Just use:

ionic plugin add https://github.com/VitaliiBlagodir/cordova-plugin-datepicker

on your project’s cli

10

cordova plugin add https://github.com/VitaliiBlagodir/cordova-plugin-datepicker

Then in your app:

 /**
     * Function to show the date picker
     */
    $scope.showDatePicker = function($event) {
        var options = {
            date: new Date(),
            mode: 'date'
        };
        datePicker.show(options, function(date){
            if(date != 'Invalid Date') {
                console.log("Date came" + date);
            } else {
                console.log(date);
            }
        });
        $event.stopPropagation();  
    };
11

Hello All,
Thank you for your help.
I have installed plugin, then copied file DatePicker.js (from WWW/Android) in my project JS folder and then used above code to invoke DatePicker.
However that result in exception mentioned as below
Uncaught ReferenceError: module is not defined
ReferenceError: cordova is not defined
at DatePicker.show (http://localhost:8100/js/DatePicker.js:51:2)
at Scope.$scope.showDatePicker (http://localhost:8100/js/Controller/hodgkin.js:48:20)
at Parser.functionCall (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18471:21)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:43026:9
at Scope.$get.Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20326:28)
at Scope.$get.Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20424:23)
at HTMLInputElement. (http://localhost:8100/lib/ionic/js/ionic.bundle.js:43025:13)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:10478:10
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at HTMLInputElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10477:5)
on investigating the code on line 60 of DatePicker.js.
module.exports = datePicker;

I am invoking this in input type=text and ng-click=“showDatePicker()”

Please let me know if I am doing anything wrong

Regards,
Suhas

12

you don’t need to include DatePicker.js in your code. Try removing it.

13

You can only test this plugin in a native application, in your browser, phonegep plugins won’t have any effect :wink: Try testing in emulator or on device!

1 Like
14

You can take a look at this post for date-picker also vali in browser for test

http://forum.ionicframework.com/t/calendar-control-for-ionic/1536

15

Thanks all, Indeed date picker only works in emulator. Need to check feasibility of the same.

Regards,
Suhas

16

Hi @saurabhgupta050, I have created both time picker and date picker for ionic frame works.
Please have a look at the below links.

ionic-timepicker demo

ionic-timepicker Bower component

ionic-datepicker demo

ionic-datepicker Bower component

2 Likes
17

How I can make update simultaneously for title in header with format date time after selected date with your script?
Its my example html template for title:

<ion-view cache-view="false" title="{{ currentDate | date:'MMM  dd, yyyy' }}">

Thanks before!

18

In call back function you will get the complete date object. You can use that date and you can assign it to some variable(lets say updatedDate), then you can use similar to what you have used <ion-view cache-view="false" title="{{ updatedDate | date:'MMM dd, yyyy' }}">. I think this should work.

19

I have released a new version of ionic-datepicker i.e. v0.8.0. If you wish to use this plug-in, please use this updated version to get the latest features and few bug fixes.

20

Hi rajesh,
could u tell how to view the saved local storage date in datepicker? and also how to view the stored time in timepicker?

21

@praveenjp, Please follow the instructions mentioned here. It explains your query i guess.