Ionicdatepicker

Ionic Datepicker

'ionicdatepicker' bower component for ionic framework applications

Free!

(53)

Demo Download

Rajeshwar

Member since 2014

Details

Version:: 1.0.0
Size:: 0mb
Ionic:: 1.0 beta 14,1.0.0,1.0.1
Platforms:: iOS, Android
View ID:: 34590d94
Released:: 8 years ago
Updated:: 7 years ago
Category:: Plugins
Tags:: ionic, date-picker

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

[View Demo](http: ajeshwarpatlolla.github.io/DatePickerForIonicFramework/demo/ "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(),
      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: [6],
    };
    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) setLabel(Optional) : The label for Set button. Default value is Set

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

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

e) 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.

f) 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"];

g) 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"];

h) 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-2015"), //Short format
      new Date(1439676000000) //UNIX format
  ];

i) 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.

j) 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.

k) 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.

l) 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

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

n) 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.

o) 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

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

Hey there! You'll need to log in before you can leave a comment here.

Oldest
Newest

Raymond Camden

Would be nice to see some docs on this. Can you easily do restrictions for example (ie, not allow the user to select particular dates).

Rajeshwar

All those features are there in this component. Please have a look at the link https://github.com/rajeshwarpatlolla/ionic-datepicker

leob · 8 years ago

Looks very nice, keen to try it out when I need a date picker in my app.

Rajeshwar · 8 years ago

These features are already implemented in my component. You can see everything in the link https://github.com/rajeshwarpatlolla/ionic-datepicker

Abdul Samad · 8 years ago

I need to show only month and year, is this possible to this date picker

Andres Mora · 8 years ago

Hi! First of all.. excellent work providing this nice date picking system. Yesterday I was using it, and after I played with it a lot of time, I think I've found a little issue. After you pick a random date, and then you pick to use the button "Today" the Date (variable) is correctly updated, but the selected date in the UI is not, leading to confusion. I tried to fix it, but failed after a couple of tries. Maybe you know your code a lot better and can find a possible solution. Cheers and keep up this awesome work!

Gassan · 8 years ago

Hi Raje, How can I get the date in UNIX format. I need it to save the date in database as unix format.

Emmanuel Etukudo Etti · 8 years ago

Hi Raj, the selected time or current time doesn;t appear on the button

Rajeshwar · 8 years ago

You should assign the returned date to the scope variable. If you have created an object like this ````javascript $scope.datepickerObject = { inputDate: new Date(), //Optional } ```` then you have to assign the returned value to this variable like `$scope.datepickerObject.inputDate = returned value`. By the way this is not the issue with the component. It's the logic, which you need to implement in the controller.

Gassan · 8 years ago

Hi Raje, when I pic a date and console.log('Selected date is : ', val);. They give me day before the date I pic !

Gassan · 8 years ago

on firefox

Rajeshwar · 8 years ago

Did you tested the demo? Are you facing the same issue there? It should work fine actually.

Gassan · 8 years ago

yes it is ... on FireFox browser ... I test the demo and he give me day before any date I pick ...weird!

Gassan · 8 years ago

on Chrome is fine just FireFox ...?

Gassan · 8 years ago

Hi Raje... Why the days 10,12,14,16 of Aug 2015 is disable in the piker

Rajeshwar · 8 years ago

I hope u r looking at the demo. There just to demonstrate i have added those days.

Gassan · 8 years ago

Thanks raje ... Great job ... I used you Datapicker in my project ... thanks again

Mark Veenstra · 8 years ago

Please took a look at our fork and pull request. Which improves the use of this datepicker: https://github.com/rajeshwarpatlolla/ionic-datepicker/pull/92

Rajesh K · 8 years ago

Thanks Rajesh its cool stuff!

Sathish Ravepati · 8 years ago

Thanks Rajesh, this is the wonderful plugin i came across. Very well documented. I have created 2 ionic-date-pickers(start and end date). I want to disable all the previous dates w.r.t start end in the second popup datepicker ??

chaitanya · 8 years ago

Thanks Rajesh for very useful plugin.

Juan David Nicholls · 7 years ago

Eyyy man, thanks for this plugin, is very useful! See please an error in Windows! :o http://screencast.com/t/efRSAMhOY

Fred · 7 years ago

Rajesh good plugin mate. I found a fix for closeOnSelect=true the following code will need to be changed. scope.dateSelected = function (date, isinit) { if (isinit) return; And this line if (tempDate.getDate() == current_date.getDate()) { scope.dateSelected(scope.dayList[scope.dayList.length - 1],true); };

Rajeshwar · 7 years ago

Thanks you so much @Fred. This feature is not yet implemented in the last release. I am planning to implement it in the next release. So this will be an enhancement in the next version, instead of a bug in the current version.

Louis · 7 years ago

Hi, great plugin thanks ! Is it possible to display the weekday along with the date in the template ? Maybe with the dateFormat ? Thanks

Alain ANDRÉ · 7 years ago

Hi there, thanks Rajeshwar fr this plugin. Just to share I'm having the same issue as Gassan. On Firefox when printing the returned value with console.log(), I get the day before. But when printing it in alert(), It shows the good date.

Daniele Scotti · 7 years ago

Hi, fantastic plugin Rajesh. But i have a little problem: when i select a date in datepicker, if i reopen it does not remain the selected date but the initial date, there is a solution? Thanks!

Rajeshwar · 7 years ago

Hi @Daniele, yes, it will show the date that we have assigned in the initial step. In order to reflect with the selected date, all you need to do is, just assign the selected date to the date object( to 'inputDate' property) that you are passing to the datepicker.

Kowsalya · 7 years ago

Hi, Your plugin is great. But did you check the plugin in landscape mode? I have some css issues in landscape mode. Thanks in advance. :)

JemliF · 7 years ago

Hi, Thank you for this great plugin, it works fine in browser, but when i tried it in a device, both year and month pickers are not working: https://drive.google.com/file/d/0B2S5amMpeE6QSlR6UTE4XzI1Unc/view?usp=sharing

Kien Gian · 7 years ago

Hi @Rajeshwar , your plugin really good for everyone who is learning ionic framework, angularJS. So, I try to create a bit application integrated with your plugin, but I can not understand clearly. I am grateful if you share full your plugin it mean the learner like me only cmd ionic serve and then it show in browser.

Kien Gian · 7 years ago

Thank your sharing !

Maheshchhetri · 7 years ago

Hi I think you are looking for datepicker directive I have tried this, i works for me, may it help <div class="padding-horizontal"> <ionic-multi-date-picker input-obj="datepickerObject"> <button class="button button-block button-energized"> {{selectedDates.length}} date(s) / {{ datepickerObject.templateType }} </button> </ionic-multi-date-picker> </div>