ionic-datepicker | Online try out、debug and test ionic-datepicker with devtools | All badges about ionic-datepicker

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

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

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>

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

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

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.

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

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

basic

popularity

size

quality

health

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

iOS :

Android :

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

1) left_arrow

2) right_arrow

1) v0.1.0

2) v0.1.1

3) v0.1.2

4) v0.1.3

5) v0.2.0

6) v0.3.0

7) v0.4.0

8) v0.5.0

9) v0.6.0

10) v0.7.0

11) v0.8.0

12) v0.9.0

13) v1.0.0

14) v1.1.0

15) v1.2.0

16) v1.2.1