Ionic-datepicker Bower component for Ionic framework applications


#1

I have designed a bower component ionic-datepicker, which can be used in any ionic framework application. No additional plugins required.

Please checkout the below Github repository for the bower component.

ionic-datepicker project @ Github

You can have a look at the ionic-timepicker bower component, which i have created earlier.

##Introduction:

This is an ionic-datepicker bower component which can be used with any Ionic framework’s application.

View Demo

##Prerequisites.

  1. node.js, bower and gulp.

##How to use:

  1. In your project repository install the ionic-datepicker using bower

    bower install ionic-datepicker --save

This will install the latest version released.

  1. Then you can see the following directory structure see in your project folder

Directory structure

Give the path of style.css, templates.js and ionic-datepicker.js in your index.html file.

<link href="lib/ionic-datepicker/dist/style.css" rel="stylesheet"> 
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-datepicker/dist/templates.js"></script>
<script src="lib/ionic-datepicker/dist/ionic-datepicker.js"></script>
  1. In your application module inject the dependency ionic-datepicker, in order to work with the ionic time picker

    angular.module(‘mainModuleName’, [‘ionic’, ‘ionic-datepicker’]){
    //
    }

  2. Use the below format in your template’s corresponding controller

    $scope.currentDate = new Date();
    $scope.datePickerCallback = function (val) {
    if(typeof(val)===‘undefined’){
    console.log(‘Date not selected’);
    }else{
    console.log('Selected date is : ', val);
    }
    };

a) currentDate is the date object which we are passing to the ionic-datepicker.

b) datePickerCallback is the callback function which we have to pass to the ionic-datepicker. This function takes an argument which will return undefined if the user didnot selected any date. And returns a date object, if the user selects any date.

  1. Then use the below format in your template / html file

    {{ currentDate | date:'dd - MMMM - yyyy' }}

a) ionic-datepicker is the directive, to which we can pass required vales.

b) idate takes date object. If we don’t pass any value, the default value will be new Date().

c) disablepreviousdates takes true or false. true disables the past dates, and false doesn’t.

d) callback takes the callback function name which will be called once the date picker has been closed.

##Screen Shots:

Once you are successfully done with the above steps, you should be able to see the below screen shots.
I have used two buttons here.

The first screen shot shows only the buttons before clicking on them.
Once you click on the button you should see the second screen shot.



##Versions:

1) v0.1.0

The whole date picker functionality has been implemented, and can be installed with bower install ionic-datepicker --save

2) v0.1.1

Bug Fix. This is the latest version of ionic-datepicker component.

3) v0.1.2

Bug Fix. If we don’t pass the date to the time picker it will pick the todays date by default.

4) v0.1.3

Bug Fix

5) v0.2.0

Disabling previous dates functionality added.

6) v0.3.0

a) User can select the years and months using the dropdown.

b) A callback function is added.

##License:
MIT

##Contact:
gmail : rajeshwar.patlolla@gmail.com

github : https://github.com/rajeshwarpatlolla

twitter : https://twitter.com/rajeshwar_9032

facebook : https://www.facebook.com/rajeshwarpatlolla

paypal : rajeshwar.patlolla@gmail.com


Problem with date picker when viewing in a desktop browser
Native date picker in ionic
Angular-DatePicker - pickadate.js port to Angular, no jQuery dependency!
Looking for a responsive date-picker with multi date selection
Date Picker for Ionic
Form Date Picker
Looking for a date-picker for ionic / mobile performance focused
Datepicker for Android &lt;4.4 NEW
Ionic-timepicker Bower component for Ionic framework applications
A time picker for Ionic framework applications
DatePicker in ionic framework
Date Picker is not working
A time picker for Ionic framework applications
A time picker for Ionic framework applications
A date picker for ionic framework applications
A time picker for Ionic framework applications
Date time picker for ionic
Need Help Getting a DatePicker working, Please and thanks!
Open a the date picker by clicking a button?
Date picker not working with ionic.bundle.js
#2

Hi @rajeshwarpatlolla, I’m testing my app with Ionic View (http://view.ionic.io/) and the datepicker is not coming up. Any ideas? (I’m using Ionic View on an iPhone 6)


#3

Hi @rajeshwarpatlolla, I like the idea of having an ionic datepicker. I think that I would be nicer if the component could be more configurable. You can have a look to the ngCordova one: http://ngcordova.com/docs/plugins/datePicker/
Hope it helps!


#4

Hi @yassgayl, Thanks for the suggestion. That’s really useful configuration.


#5

Hi @gigocabrera, Have you tested it in browser?


#6

Hi @rajeshwarpatlolla in browser everything works like a charm. When I uploaded my app to Ionic View to test it on my iPhone 6 the date picker does not work.


#7

Hi @gigocabrera, i have tested these two components in desktop browser, emulator and even in mobile also. Please have a look at the below screen shots.

Date picker in emulator

Date picker in mobile

Time picker in mobile

Please have a look at my ionic-timpicker component, as there is a new release with a small change.
Could you please let me know what version of ionic you are using?


#8

@rajeshwarpatlolla I see my problem. I made a stupid mistake (hahaha). The date picker works when adding a new record. I am saving the date in Firebase in a format that when I open the view in edit mode the datepicker is not able to understand the saved date.

What would you recommend be the correct format to save and retrieve dates?

(being a newbie is not fun… lots of bumps on the road :cry:)

BTW I just upgraded to Ionic, v1.0.0-rc.5


#9

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?


#10

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?


#11

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. :smile:


#12

@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?


#13

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/


#14

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 !


#15

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.


#16

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.


#17

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


#18

No, For this component i am using a modal.


#19

Okey, thank you for the quick response


#20

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.