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>
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.
Hope this will resolve your problem. If you still have any queries let me know. I will be there to help always.
@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
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
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,
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.
any suggestion?