Date Picker for Ionic


#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!


#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


#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.


#22

Thanks for your response,

<ionic-datepicker input-obj="datepickerObject">
  <button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
</ionic-datepicker>

That above code shows the current date…but i want to show my localstorage date on it…for example i get the date form localstorage and use this code {{infoRem.at}} to view in datepicker.

please help me to find out the actual solution.


#23

You have to get the date from LocalStorage, when you enter into the page where you are using this component. As the page will have a separate controller, on entering into that controller you can get it from LocalStorage and in the same controller you might be using the object which is needed for this component. To that object you can assign the date which you have already got from the LocalStorage.


#24

Thank You… It’s works fine but i got one small issue… when i changed the date it’s shows the same date in ionic-datepicker


#25

You have to assign the date to $scope.datepickerObject.inputDate, which you will receive in the callback. Then it will also update the date on the button where you are using it. If you wish to continue this discussion on ionic-datepicker component, you can continue here. That will also help people who are using this component.


#26

Thank You @rajeshwarpatlolla !.. It’s works fine… :relaxed:


#27

hi @rajeshwarpatlolla the date in the button still not changing when i set a date. please help


#28

You need to assign the date to a scope variable in the controller. This is the variable, which you need use to show the date on the button.