Ionic-datepicker Bower component for Ionic framework applications

If you are trying open the time picker component, what format you are getting from the server? Are you getting a date string or epoch time or date object or any other format?

Hi @rajeshwarpatlolla, I have a screen with 2 date fields: Start Date and DatePicker Date

<label class="item item-input">
     <span class="input-label">Start Date</span>
     <input type="date" ng-model="currentItem.OpenDate">
</label>
<label class="item item-input">
     <span class="input-label">Datepicker Date</span>
     <ionic-datepicker idate="currentItem.DatePickerDate">
      <button class="button button-block button-positive"> {{ currentItem.DatePickerDate | date:'dd - MMMM - yyyy' }} </button>
      </ionic-datepicker>
</label>

image

I have the following on the click event of the Save button

console.log("Normal date " + $scope.currentItem.OpenDate);
console.log("DatePicker date " + $scope.currentItem.DatePickerDate);

and the result I get is as follows

Normal date Fri May 01 2015 00:00:00 GMT-0400 (Eastern Daylight Time)
DatePicker date Fri May 01 2015 00:00:00 GMT-0400 (Eastern Daylight Time)

However, none of those two formats is saved in Firebase, and I can’t get it to work. Any ideas?

Hi @gigocabrera, Here you are getting a date object. You can convert it to epoch and store it in the DB.
So create a date obeject by var x = new Date($scope.currentItem.OpenDate) and now you can change it to epoch time by x = +x, and you can now store it in the DB. Please have a look at the following screen shot, which might help you to move on.

image

Hope this will resolve your problem. If you still have any queries let me know. I will be there to help always. :smile:

@rajeshwarpatlolla That worked. You’re the best!!!

One more thing I noticed is that the datepicker allows me to tap on the form behind and perform actions while the datepicker is still showing. I want to force users to tap on the Close or Set buttons to complete the action and avoid errors. Is this possible?

Hi @gigocabrera, In my components i am using popup modals to show the time and dates. Ionic by default adds a backdrop for popups, when they are opened ans removes the backdrop when we close it. And also you can see the screen shots above, which has a backdrop.

Please have a look at the below link to deal with the backdrops, which might help you
http://ionicframework.com/docs/api/service/$ionicBackdrop/

Dear rajesh, thanks for you work. It looks very nice.
I won’t use it for now because after some tests I had some issues :

  • couldn’t get the current date to be highlighted
  • if I click on the date button with today’s date (eg 05-06), then picking another date (05-07), then closing (without setting) and clicking back on the date button, the datepicker opens and preselects 05-07 instead of 05-06. It should be preset to the first date since I didn’t save my previous changes.

Also I’m delivering an update for my app really soon so I will look for updated to your script for the next update.

I started to edit the code for localizing Month names and week names, so I’ll leave it for some one to use :

//var n = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
var n = [$filter('date')("1970-01-01", "MMMM"),$filter('date')("1970-02-01", "MMMM"),$filter('date')("1970-03-01", "MMMM"),$filter('date')("1970-04-01", "MMMM"),$filter('date')("1970-05-01", "MMMM"),$filter('date')("1970-06-01", "MMMM"),$filter('date')("1970-07-01", "MMMM"),$filter('date')("1970-08-01", "MMMM"),$filter('date')("1970-09-01", "MMMM"),$filter('date')("1970-10-01", "MMMM"),$filter('date')("1970-11-01", "MMMM"),$filter('date')("1970-12-01", "MMMM")]
           
var o = angular.copy(t.ipDate);
            
//t.weekNames = ["S", "M", "T", "W", "T", "F", "S"], t.today = {}, t.today.dateObj = new Date, t.today.date = (new Date).getDate(), t.today.month = (new Date).getMonth(), t.
            
t.weekNames = [$filter('date')("2015-05-03", "EEE").substr(0,1).toUpperCase(), $filter('date')("2015-05-04", "EEE").substr(0,1).toUpperCase(), $filter('date')("2015-05-05", "EEE").substr(0,1).toUpperCase(),$filter('date')("2015-05-06", "EEE").substr(0,1).toUpperCase(),$filter('date')("2015-05-07", "EEE").substr(0,1).toUpperCase(),$filter('date')("2015-05-08", "EEE").substr(0,1).toUpperCase(),$filter('date')("2015-05-09", "EEE").substr(0,1).toUpperCase()];

Cheers !

Hi @koko, Thanks for finding the issues.
These issues are fixed and you can get the updated code in the new version v0.1.3.

Hi everyone, thanks for your support,

I have implemented a new feature into this component. This features enables you to disable the past/previous dates.
You can install new version#v0.2.0 by bower install ionic-datepicker --save-dev
You can try bower cache clean before installing this new version.

Please see the instructions above.

is it possible to just display the picker instead of having it in a modal view ?

No, For this component i am using a modal.

Okey, thank you for the quick response

Hi @rajeshwarpatlolla

Really like the Ionic-datepicker, it’s a great component. However, I’m finding that when I select a date, it is stored in the database 1 day earlier than my selection. E.g. if I select 17/06/2015, it is stored in my database as “2015-06-16…”. Please help!

Many thanks

Edit: I am storing the date in LocalStorage.

Awesome component, working fine here, just what i was looking for, thank´s Rajeshwar

Thank a lot @angelorigo :smile:

Hi!

Newbie question :
How can i get the value of the choosen date inside my controller ?
In the view i see {{currentDate}} working, i do not have the same value inside the controller by using $scope.currentDate.

I just want to get this value after a form submit, how can it be done ?

Thank´s in advance

Not sure if it is the best way, but it works : {{ data.choosenDate = currentDate; }} declare this on the view and it is available on the controller on $scope.data.

Hi Everyone,
I have released a new version v0.3.0 of ionic-datepicker with some additional functionalities.
a) User can select the years and months using the dropdown.
b) A callback function is added.

Please have a look at these new features.

Hi @angelorigo, Please install ionic-datepicker v0.3.0. Your issue will get resolved.

Hi,

This was due to my own lack of knowledge of how LocalStorage stores dates.

Instead of storing in LocalStorage as a standard Date object, I store is as:

this.currentDate.getTime();

Then, when getting the date back out of LocalStorage I do:

var myDate = new Date(parseInt(storedDate,10));

hi @rajeshwarpatlolla the project and the idea is awesome. i want to use the ionic-datepicker but unfortunately i keep getting error while install it from bower, here is the error message.
image
any suggestion?