rajeshwarpatlolla / ionic-datepicker

'ionic-datepicker' bower component for ionic framework applications

##Introduction:

This is an ionic-datepicker bower component, which can be used in any Ionic framework's application. No additional plugins required for this component. This plugin is completely open source. Please rate this plugin @ Ionic Market

From version 1.0.0, this component has got so many new features and the way you should use is different from the older versions of this component. If you wish to see the documentation for the previous versions of this component, please check the previous releases

For ionic v2, this component is under development. You can check it here

View Demo

##Prerequisites.

• node.js, npm
• ionic
• bower
• gulp

##How to use:

1. In your project folder, please install this plugin using bower

bower install ionic-datepicker --save

This will install the latest version of this plugin. If you wish to install any specific version(eg : 0.9.0) then

bower install ionic-datepicker#0.9.0 --save

2. Specify the path of ionic-datepicker.bundle.min.js in your index.html file.

<!-- path to ionic -->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

3. In your application's main module, inject the dependency ionic-datepicker, in order to work with this plugin

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

4. You can configure this date picker at application level in the config method using the ionicDatePicker provider. Your config method may look like this if you wish to setup the configuration. But this is not mandatory step.

.config(function (ionicDatePickerProvider) {
    var datePickerObj = {
      inputDate: new Date(),
      titleLabel: 'Select a Date',
      setLabel: 'Set',
      todayLabel: 'Today',
      closeLabel: 'Close',
      mondayFirst: false,
      weeksList: ["S", "M", "T", "W", "T", "F", "S"],
      monthsList: ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
      templateType: 'popup',
      from: new Date(2012, 8, 1),
      to: new Date(2018, 8, 1),
      showTodayButton: true,
      dateFormat: 'dd MMMM yyyy',
      closeOnSelect: false,
      disableWeekdays: []
    };
    ionicDatePickerProvider.configDatePicker(datePickerObj);
  })

In the above code i am not configuring all the properties, but you can configure as many properties as you can.

The properties you can configure are as follows.

a) inputDate(Optional) : This is the date object we can pass to the component. You can give any date object to this property. Default value is new Date().

b) titleLabel(Optional) : Optional title for the popup or modal. If omitted or set to null, title will default to currently selected day in format MMM dd, yyyy

c) setLabel(Optional) : The label for Set button. Default value is Set

d) todayLabel(Optional) : The label for Today button. Default value is Today

e) closeLabel(Optional) : The label for Close button. Default value is Close

f) mondayFirst(Optional) : Set true if you wish to show monday as the first day. Default value is false, which will show Sunday as the first day of the week.

g) weeksList(Optional) : This is an array with a list of all week days. You can use this if you want to show months in some other language or format or if you wish to use the modal instead of the popup for this component, you can define the weekDaysList array in your controller as shown below.

  ["Sun", "Mon", "Tue", "Wed", "thu", "Fri", "Sat"];

The default values are

  ["S", "M", "T", "W", "T", "F", "S"];

h) monthsList(Optional) : This is an array with a list of all months. You can use this if you want to show months in some other language or format. You can create an array like below.

  ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

The default values are

  ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

i) disabledDates(Optional) : If you have a list of dates to disable, you can create an array like below. Default value is an empty array.

  var disabledDates = [
      new Date(1437719836326),
      new Date(),
      new Date(2016, 7, 10), //Months are 0-based, this is August, 10th.
      new Date('Wednesday, August 12, 2015'), //Works with any valid Date formats like long format
      new Date("08-14-2016"), //Short format
      new Date(1439676000000) //UNIX format
  ];

j) templateType(Optional) : This is string type which takes two values i.e. modal or popup. Default value is modal. If you wish to open in a popup, you can specify the value as popup or else you can ignore it.

k) from(Optional) : This is a date object, from which you wish to enable the dates. You can use this property to disable previous dates by specifying from: new Date(). By default all the dates are enabled. Please note that months are 0 based.

l) to(Optional) : This is a date object, to which you wish to enable the dates. You can use this property to disable future dates by specifying to: new Date(). By default all the dates are enabled. Please note that months are 0 based.

m) dateFormat(Optional) : This is date format used in template. Defaults to dd-MM-yyyy. For how to format date, see: http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15

n) showTodayButton(Optional) : Boolean to specify whether to show the Today button or not. The default values is false.

o) closeOnSelect(Optional) : Boolean to indicate whether date picker popup/modal will be closed after selection. If set to true, Set button will be hidden. The default value is false.

p) disableWeekdays(Optional) : Accepts array of numbers starting from 0(Sunday) to 6(Saturday). If you specify any values for this array, then it will disable that week day in the whole calendar. For example if you pass [0,6], then all the Sundays and Saturdays will be disabled.

5. Inject ionicDatePicker in the controller, where you wish to use this component. Then using the below method you can call the datepicker.

.controller('HomeCtrl', function ($scope, ionicDatePicker) {

    var ipObj1 = {
      callback: function (val) {  //Mandatory
        console.log('Return value from the datepicker popup is : ' + val, new Date(val));
      },
      disabledDates: [            //Optional
        new Date(2016, 2, 16),
        new Date(2015, 3, 16),
        new Date(2015, 4, 16),
        new Date(2015, 5, 16),
        new Date('Wednesday, August 12, 2015'),
        new Date("08-16-2016"),
        new Date(1439676000000)
      ],
      from: new Date(2012, 1, 1), //Optional
      to: new Date(2016, 10, 30), //Optional
      inputDate: new Date(),      //Optional
      mondayFirst: true,          //Optional
      disableWeekdays: [0],       //Optional
      closeOnSelect: false,       //Optional
      templateType: 'popup'       //Optional
    };

    $scope.openDatePicker = function(){
      ionicDatePicker.openDatePicker(ipObj1);
    };
};

Apart from the config method, you can re configure all options in the controller also. If you again set any of the properties, they will be overridden by the values mentioned in the controller. This will be useful if there are multiple date pickers in the app, which has different properties.

In all the above steps the only mandatory thing is the callback where you will get the selected date value.

##Screen Shots:

Once you are successfully done with the above steps, you should be able to use this plugin.

The first screen shot shows the popup and the second shows the modal of this plugin.

iOS :

Android :

##CSS Classes:

###popup

1) prev_btn_section

2) next_btn_section

3) select_section

4) month_select

5) year_select

6) calendar_grid

7) weeks_row

8) selected_date

9) date_col

10) today

###modal

1) left_arrow

2) right_arrow

Other classes are same as the popup classes. You can use any one of the below classes to customise popup and modal css respectively.
####ionic_datepicker_popup ####ionic_datepicker_modal

The css class names for the buttons are as follows

a) For Set button the class name is button_set

b) For Today button the class name is button_today

c) For Close button the class name is button_close

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

7) v0.4.0

Features

a) Disabling future dates functionality added. You may use it for selecting DOB.

b) Customised title text for datepicker modal's added.

BugFixes

Bug#22, Bug#26, Bug#29

8) v0.5.0

a) Feature for disabling particular dates has been added.

b) CSS classes added for customisation.

9) v0.6.0

a) Date selection color issue fixed.

b) Added feature to show Monday as the first day of the week.

10) v0.7.0

Features

a) from and to dates functionality added.

b) Code re-structuring.

c) Updated node modules.

BugFixes

Bug#58, Bug#56, Bug#54, Bug#42, Bug#37, Bug#28

11) v0.8.0

Feature

You can use either a popup or a modal for this ionic-datepicker.

BugFix

Bug#59

12) v0.9.0

Feature

You can give your custom week names.

BugFix

Bug#63

13) v1.0.0

Features

a) You can configure the ionic-datepicker from the config method.

b) You can invoke the ionic-datepicker from the controller.

c) New CSS

d) Disabling a particular day of the calendar.

Few more features are also added apart from the above mentioned features.

BugFixes

Bug#88, Bug#94, Bug#101, Bug#112, Bug#114, Bug#116, Bug#117, Bug#120, Bug#128, Bug#129, Bug#133, Bug#145, Bug#146, Bug#151, Bug#154, Bug#161, Bug#163, Bug#166, Bug#168, Bug#171

14) v1.1.0

BugFixes

Bug#178, Bug#179, Bug#180

15) v1.2.0

Lots of bug fixes. Lots of PR's merged.

CSS changes for popup, so that all the dates of all the months fits in the specified height.

16) v1.2.1

Version modified to match with the current release version.

##License: MIT

##Contact: Gmail : [email protected]

Github : https://github.com/rajeshwarpatlolla

Twitter : https://twitter.com/rajeshwar_9032

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

Paypal : [email protected]

Comment or Rate it : http://market.ionic.io/plugins/ionicdatepicker

ionic-datepicker's Issues

Automatically select the actual date without need to tap the date day

Hi !

Today when i do open the calendar the actual day is selected and it shows in gray background, and i know i need to tap into the actual day to select it.

If i did not choose a day and close the calendar, this error message is fired: "Please select a day" . Can we in turn modify this behaviour? if the user opens the calendar and select no day at all, the actual day will be the selected day ?

Localization

Hello!
The months, days of week, and GUI are in english, is on plan to localize these objects?

Feature Request: Ability to use date instead boolean for disablePreviousDates and disableFuturesDates

Great directive. The ability to use a date for disablePreviousDates and disableFutureDates instead of a boolean so you could use two calendar directives and build a valid range. Would allow the start date directive to use end date directive date as disableFutureDates, and end date directive to use the start date directive to as disablePreviousDates. All sync'ed from a parent controller declaratively using controller $scoped members, so just need ability to set as a date.

Today button returns the current Timestamp.

Hello, the button "Today" returns the current timestamp (Ex.: "Tue Jun 30 2015 21:35:44").
If you select a date, by clicking on the day, the time epoch is 00:00:00.

Not able to pass values to parent scope!!

Hello

Hello I can't install this plugin. bower show me next error

http://i.imgur.com/BQCwyYb.png

use ng-model instead of idate

for example

<ionic-datepicker ng-model="vm.currentDate" >
    <button class="button button-block button-positive"> {{ vm.currentDate | date:'dd - MMMM - yyyy' }} </button>
</ionic-datepicker>

TypeError: e.getFullYear is not a function

I have two modal forms, a "create" and an "update". ionic-datepicker is working superbly on the "create" form; but I'm having problems on the "update" form.

The date pulls in and displays perfectly when the "update" form loads. However, when I click on the datepicker field to edit it, the console shows the following message:
TypeError: e.getFullYear is not a function" which points to lib/ionic-datepicker/dist/ionic-datepicker.js 1:640

I'm running ionic 1.0.0-rc.5, angular 1.3.13, and bower's version 0.1.3 of ionic-datepicker (differs from your package.json version number of 0.0.1).

Any ideas what might be causing this error?

Styling is a bit broken

Default ionic popup window width is too small

Thanks

Feature request: Time

It would be nice to be able to also input time.

Error setting date from timestamp

Hi, your date picker had been very useful to my development, but I have a little issue.

I set the value of the datepicker from a timestamp that i get from a service. The datepicker set the date, but when I want to change the model value I get this on javascript console:

 e.setHours is not a function

This is my code

 var mydate=$scope.orden.fecha_tope; // formated 2012-02-02
 $scope.orden.currentDate=Date.parse(mydate.replace(/-/g,"/")); //Update the model of the datepicker

Template:

        <ionic-datepicker idate="orden.currentDate" disablepreviousdates="true"  callback="datePickerCallback">
         <button class="button button-block button-positive" type="button"> {{ orden.currentDate | date:'dd - MMMM - yyyy' }} </button>
           </ionic-datepicker>

What can I do to fix this?

Thanks a lot!

getting selected value to the controller

i'm unable to get the user selected date at the controller , it always giving the right now time rather than the selected time. In the view it shows the correct selected date , but not at the controller

Size of month and year select boxes trimmed to 3 characters

The size of the month and year select boxes is trimmed to 3 characters, into Android. I just try to edit datepicker-modal.html and set size to 26 but could not see any diference.

Support for start and end date

Rajesh, do you have any plans to provide attribute support for setting a start and end dates? So that user can only pickup those valid dates? My use for a time card reporting app, where user can only select a day from valid range of dates?

Thanks,
Sai.

PS: Keep up the good work.

Future date limit

Do we have option to limit future date selection. For example user can only select future date for next month not after that?

set max range

can you please help me in how to set up a range of selected dates in datepicker?
and how can i change the minimum selection date to today , so that user don't select the previous date

Cannot disable today's date

Hi,

I have two problems :

I am not able to disable today's date in the datepicker:

$scope.disabledDates = [
     new Date()
];

Today's date can still be picked.

2. Because I do not want users to be able to select today's date, is there a way to remove the "today" button with a directive ?

Thank you for your help !

Start and end date, opening without a button

Hi, first thanks for your work. I have some suggestions.

To me, it is more useful to be able to set start and end date, not only disable previous or future dates. For instance, I would like to enable user to choose any date from tomorrow to one year in the future.

Another suggestion is to enable adding and opening a date picker dialog without adding a button that displays the date. I've solved this by hidding a button and initiating onClick event with jquery but I guess it is not a proper angular approach.

on iOS, seems to be an issue with disabled date cells and :hover styles

It seems as though there is an issue with disabling a date - where when you try tapping on this disabled date, the :hover style (which is a light blue colour) is applied to the cell, regardless of whether or not this cell is selectable. Maybe this is a feature, but the concern is this may confuse a user, letting them think this cell is selected.

To replicate, use modal version of datepicker, disable a date or date range, open up an app in iOS (simulator or device) and select this disabled date - you will see the light blue selected style applied, and it will persist until you click on another cell.

opposite of "disablepreviousdates"

Implement a opposite of "disablepreviousdates" for future dates, say "disablefuturedates" to disable future dates, useful for date of birth scenarios.

Year selection

Thanks for this :)
Just wanted to inquire if there are any plans of selecting a year?
e.g. to set birth date (think 20, 30, 40 years back)

The weekDaysList is shifting when it is customized

Hi,

First of all, thanks a lot for your great work !

I found a problem with the weekDaysList. I use you DatePicker to create several events, and each time I set a new date the weekDays are shifting one day to the left.

The first time I use it the list goes from Monday to Sunday (I set mondayFirst to true), the second from Tuesday to Monday, the next one from Wednesday to Tuesday etc.

The dates in the calendar stay in the good columns, only the letters above are shifting (so the second day I have the Tuesday letter above the Monday column).

I don't have this issue with the default weekDaysList, only when I customized it. I encounter this on both device and ionic serve.

Do you have an idea of where it could come from ? I'll work on it and keep you updated if I find something.

Thanks.

Date being set to prior date because of daylight savings time

If I set the date to 2nd June 2015, what is being stored is the midnight (00:00:00.0) time. Because I'm BST (GMT -1 hour for daylight savings), the ISO date string that is being stored is 1st June 2015 at 23:00.

I've worked around it by setting the value in the call back to 12-midday with val.setHours(12).

Select boxes not updating at prevMonth and nextMonth

Hi all,

I have the following issue with the datepicker:

Once I selected a month or a year from the select boxes and then change the months via the buttons (prevMonth and nextMonth) then the select boxes will not update to the selected month or year any longer.

Can anyone confirm this? Or know a possible solution for this?

Regards
Michael

Year Field becomes blank when past the end of year array

Great work Rajesh. This is beautiful. I did have an issue though.

I restricted the years on the datepicker to only be this year in my own file(so it didnt get overwritten with any updates)...

var app = angular.module('ionic-datepicker');

app.service('DatepickerService', function () {

var date = new Date();
var current_year = date.getFullYear();
this.monthsList = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
this.yearsList = [current_year];
});

When this happens I can click past the end of 2015 but no year shows up. Attached is a picture of what I mean

Also is there a way to load this from an unminified source? Its virtually impossible to debug it any other way.

Unexpected end of expression Error

I have follow the instruction to install ionic-datepicker, but when I try to click the datepicker, the following error was thrown on my browser javascript console

Error: [$parse:ueoe] Unexpected end of expression: dateSelected(dayList
http://errors.angularjs.org/1.3.13/$parse/ueoe?p0=dateSelected(dayList
    at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:8762:12)
    at Parser.consume (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20747:13)
    at Parser.functionCall (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:21022:10)
    at Parser.primary (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20694:24)
    at Parser.unary (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20970:19)
    at Parser.multiplicative (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20953:21)
    at Parser.additive (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20944:21)
    at Parser.relational (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20935:21)
    at Parser.equality (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20926:21)
    at Parser.logicalAND (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20917:21) <div class="date_cell ng-binding" ng-click="dateSelected(dayList[$parent.$index * numColumns + $index])" ng-class="{'pointer_events_none':(disablePreviousDates &amp;&amp; previousDayEpoch >(anonymous function)

Any idea how to solve this?

Set idate after ajax request

How do i set idate attribute after an ajax request (and after the template gets loaded)?
If I have something like

MyService
.getSomeData()
.then(function(response)) {
$scope.datepickerdate = response.date;
}

in my controller and

<ionic-datepicker idate="datepickerdate" ...

in my template, this datepickerdate is never set, because the idate attribute is "loaded" together withe the controller. In other words, I needed to set this attribute with a date that comes from my backend app.

Feature Request

Hi

I am a fan of this component, a feature request would be to enable just the month selection, and hide weekdays and monthdays.

Maybe just with variables called :disableWeekdays and disableMonthDays: maybe just in this way :

Selecting year on iOS not working. Also Today button not picking date

When you select the year in iOS, nothing happens. You need to tap outside the select component to get the year select reflect in the picked date.

Also, when you select the Today button, the date gets picked in the calendar, but not in the selected date, which, for me, was the expected behaviour:

Otherwise, great component :-)

Close ionic-datepicker on History Back

Hi, thanks your great work.
And I find bug when open ionic-datepicker, then widows history back, the ionicPopup still shown. How can I close ionic-datepicker programmlly?

clicking empty cells causes JS error

Anyway to call timepicker after setting datepicker?

Was wondering how you'd suggest opening the timepicker modal after a user is done setting their date from the datepicker modal.

February 2015 Starts on Monday, but should start on Sunday. March Ends on Wednesday, but should end on Tuesday.

In the datepicker, I'm not sure how this is happening, but there is a weird date issue for February and March - if you check these images (on your demo) you'll see it.

January-February 2015, missing day

### March-April 2015, overlapping day

Is it able to surpport multi date selection?

As discussed
http://forum.ionicframework.com/t/looking-for-a-responsive-date-picker-with-multi-date-selection/12143

Clicking on the empty cells sets dates to NaN

If the user clicks on the empty cells rapidly, the dates on top will be set to empty dates.

Disabled dates in toDate (disabledDates <= fromDate)

Hi,

Disabled dates conditions:

1. fromDate == null -> disabledDates < sysDate (in fromDate)
2. fromDate != null -> disabledDates <= fromDate (in toDate)

Setting inputDate

Hello,
I'm using your great date picker (in popup mode).
I think there are 2 bugs I discovered.

1. If not specifying "inputDate" at the creation of the object - Setting the inputDate of the control later at "run time" - somewhere in the controller code (view beforeEnter for instance) does not do any effect - it stays on "today" (both in the SelectedDateFull and in the calendar) - I took a look at the code - I think the following lines:

   //Setting the input date for the date picker
   if (scope.inputObj.inputDate) {
   scope.ipDate = scope.inputObj.inputDate;
   } else {
   scope.ipDate = new Date();
   }
   scope.selectedDateFull = scope.ipDate;

should be moved to the "click" event - to be set just before the view pops up.

1. Even if setting the InputDate at the object creation - the selectedDateFull gets updated - but the calendar still stands on today.

I'll appreciate your fixes - or tell me if I'm doing anything wrong.

Thanks,
Eddy

Disable any Tuesday

Hi!

Is it possible to let's say disable any Tuesday, Wednesday and Friday?
So the datepicker will only accept Mondays, Thursdays, Saturdays and Sundays?

Cant select month and year

Hi . im using your ionic date picker but i cant select any month and year.

About Colour

How I can change color from "Positive" to "Assertive" like for button or background? I think you should add an option for this

Disable Particular Day In a Calender

Hello,

I am working on order booking application in which restaurant is close on monday so I have disable the every button on monday in calender. Please check it.

Thanks in Advance.

ios is selected not work

ios is selected not work

Create a webpack compatible .bundle.js

Hi,

It would be better to integrate with build tools like Webpack if the dist directory contained a single ionic-datepicker.bundle.js instead of multiple *.js files.

Thanks,

Datepicker broken on android and chrome - Ionic v1.0.1

First day of week

In some regions, Monday is the first day of the week. So, it would be nice to be able to customize the view to start from the Monday.

View not updating when selecting month after prev month clicked

Hi Rajesh, great job! I found an issue though and I am able to reproduce this on your demo. Using the 2nd one where future dates are disabled.

1. Select January from the month select.
2. Click Prev month to go to December 2014.
3. Change the month select to January.
4. It seems the monthChanged event doesn't fire so the view doesn't update.
5. In the code, it still think it's December 2014 because click the Next month will go to January 2015 instead of February 2014 as expected.

Setting a date by choosing month -> day -> year doesnt work

Hey,

I have a problem setting dates:

1. open datepicker. Todays date is set (e.g. 2015-07-20)
2. change month (e.g. april)
3. change day (e.g. 10)
4. change year (e.g. 1988)

Month and day will be set correctly, but the year still is 2015. I also tested it with your demo and different variations. I have to set the day last, then it works.

TypeError: Cannot read property 'titleLabel' of undefined

Help!
I keep getting this error.

in javascript:

$scope.startDatePickerObject = {
            titleLabel: 'Select Date', //Optional
            todayLabel: 'Today', //Optional
            closeLabel: 'Close', //Optional
            setLabel: 'Set', //Optional
            setButtonType: 'button-assertive', //Optional
            todayButtonType: 'button-assertive', //Optional
            closeButtonType: 'button-assertive', //Optional
            inputDate: new Date(), //Optional
            mondayFirst: true, //Optional
            templateType: 'modal', //Optional
            modalHeaderColor: 'bar-energized', //Optional
            modalFooterColor: 'bar-energized', //Optional
            from: new Date(2012, 8, 2), //Optional
            to: new Date(2018, 8, 25), //Optional
            callback: function(val) { //Mandatory
                 startDatePickerCallback(val);
            }
        };

        var startDatePickerCallback = function(val) {
            if (typeof(val) === 'undefined') {
                console.log('No date selected');
            } else {
                $scope.startDatePickerObject.inputDate = val;
            }
        };

In html:

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

Screens are taking more time to load when compared to previous versions.

Great Job Rajesh.

Just wanted to point out that my pages are loading bit slower after updating my code to the latest version.

After clicking today, clicking set returns an error

If the first time you load the datepicker you click "Today" and then click "Set" I get the following: