Ionic Datepicker

Ionic Datepicker

'ionicdatepicker' bower component for ionic framework applications

Free!

(53)
Rajeshwar

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:
3 years ago
Updated:
2 years ago
Category:
Plugins
Tags:
ionic, date-picker

bitHound Score

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

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

Raymond Camden

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

Rajeshwar

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

leob

leob   ·   3 years ago

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

Rajeshwar

Rajeshwar   ·   3 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

Abdul Samad   ·   3 years ago

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

Andres Mora

Andres Mora   ·   3 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

Gassan   ·   3 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

Emmanuel Etukudo Etti   ·   3 years ago

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

Rajeshwar

Rajeshwar   ·   3 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

Gassan   ·   3 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

Gassan   ·   3 years ago

on firefox

Rajeshwar

Rajeshwar   ·   3 years ago

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

Gassan

Gassan   ·   3 years ago

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

Gassan

Gassan   ·   3 years ago

on Chrome is fine just FireFox ...?

Gassan

Gassan   ·   3 years ago

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

Rajeshwar

Rajeshwar   ·   3 years ago

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

Gassan

Gassan   ·   3 years ago

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

Mark Veenstra

Mark Veenstra   ·   3 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

Rajesh K   ·   3 years ago

Thanks Rajesh its cool stuff!

Sathish Ravepati

Sathish Ravepati   ·   3 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

chaitanya   ·   3 years ago

Thanks Rajesh for very useful plugin.

Juan David Nicholls

Juan David Nicholls   ·   2 years ago

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

Fred

Fred   ·   2 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

Rajeshwar   ·   2 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

Louis   ·   2 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É

Alain ANDRÉ   ·   2 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

Daniele Scotti   ·   2 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

Rajeshwar   ·   2 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

Kowsalya   ·   2 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

JemliF   ·   2 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

Kien Gian   ·   2 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

Kien Gian   ·   2 years ago

Thank your sharing !

Maheshchhetri

Maheshchhetri   ·   2 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>

  ·   just now

{{ reply.comment }}



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

Poh Jun Wei

Poh Jun Wei   ·   2 years ago

hi @Rajeshwar , thanks for making this great plugin! So, I'm trying to select month or year only without actually showing the dates. Is it possible to make the datepicker to show only the selection of month/year?

Rajeshwar

Rajeshwar   ·   2 years ago

With the current versions of the component, this is not possible.

  ·   just now

{{ reply.comment }}



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

Naidion Brovedan

Naidion Brovedan   ·   2 years ago

Hello! When I put an <input type = "date"> The app opens the datepicker android on the Ionic Datepicker. There is a possibility to disable the default android and use only this?

  ·   just now

{{ reply.comment }}



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

James Simoes

James Simoes   ·   2 years ago

Great plugin! Weird issue though -- today on the last day of the month if I choose September on the drop down, it goes to October.

  ·   just now

{{ reply.comment }}



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

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

I'm having troubles using this plug-in into a modal popup in Chrome.

  ·   just now

{{ reply.comment }}



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

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

When using modal, the buttons cannot see completely. When using popup, in Chrome It doesn't show the buttons Set, Today, Close. It appears: ... ... ...

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

@Rajeshwar, do I need a special CSS?

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

When I am looking in browsers the classes button_set, button_today, button_close, I can't find them.

Rajeshwar

Rajeshwar   ·   2 years ago

Can u share a screenshot of it?

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

https://www.dropbox.com/sh/j5dacbrug4gbhg8/AABICLZ__5WxVWP4A5rmpt9Xa?dl=0

Rajeshwar

Rajeshwar   ·   2 years ago

Please override the css classes which i mentioned in the documentation, so that u can see buttons properly.

  ·   just now

{{ reply.comment }}



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

Aashish R

Aashish R   ·   2 years ago

@Rajeshwar Great component any plans of creating a similar one for ionic2?

piotr

piotr   ·   2 years ago

+1

Rajeshwar

Rajeshwar   ·   2 years ago

Yes, the ionic v2 component is in progress. Soon you can expect this component for inic v2 also.

  ·   just now

{{ reply.comment }}



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

lenin mariajoseph

lenin mariajoseph   ·   2 years ago

how to display the selected date from this Datepicker?

Rajeshwar

Rajeshwar   ·   2 years ago

If you wish to show the date on the header, that's already configured. If you wish to get the selected date, you can get it in the call back and show it where ever you wish in the page.

  ·   just now

{{ reply.comment }}



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

Pete Wall

Pete Wall   ·   2 years ago

So far, this plugin is working great. Is there a way to add classes to dates other than the selected date and today? For example, if I want to add colored circles around holidays, or on the weekend days.

Rajeshwar

Rajeshwar   ·   2 years ago

You can use `date_col ` for styling the date cell. Please use this link, in case if you need additional css classes.

  ·   just now

{{ reply.comment }}



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

Austin Hunter

Austin Hunter   ·   2 years ago

I love this add-on and it is working great! Only thing I want to do is to change the color scheme to match my app's style. I have read the documentation but am confused on how I can change the colors. Any help is appreciated, thank you!

Austin Hunter

Austin Hunter   ·   2 years ago

I am using css

Rajeshwar

Rajeshwar   ·   2 years ago

You can use the css classes i mentioned in the documentation, to change the color of the whole components.

Austin Hunter

Austin Hunter   ·   2 years ago

I've tried, but I can't seem to change the green. I've changed the pop-up background and number colors but I don't want those to change. I want to change the header and buttons

Abhishek Bhimsaria

Abhishek Bhimsaria   ·   2 years ago

Hi @AustinHunter there is a bug in the code. I had the same problem, Then I saw that no matter what css color you give in the css file, it will not change color. First you need to go to: "lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js". Inside this file find the color. default is:#009688, I replaced it with my own color: #5d9cec. But remember after doing these remove the path from index.html and add once again, because it create a cache inside index.html Hope it can Help you. @Rajeshwar please fix this bug.

Rajeshwar

Rajeshwar   ·   2 years ago

Thanks for your solution.

  ·   just now

{{ reply.comment }}



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

Saim YILDIZ

Saim YILDIZ   ·   a year ago

Great work! I am waiting this plugin for Ionic 2. When you planning release for Ionic 2?

  ·   just now

{{ reply.comment }}



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

rohit aneja

rohit aneja   ·   a year ago

Great work Rajeshwar!! it works great and easy to integrate, keep it up...

Rajeshwar

Rajeshwar   ·   a year ago

Thanks @rohitaneja

  ·   just now

{{ reply.comment }}



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

Rishikesh Vedpathak

Rishikesh Vedpathak   ·   a year ago

App ID is not working in ionic view. It gives an error 'Please enter a valid app id'

  ·   just now

{{ reply.comment }}



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

Akash Kumar

Akash Kumar   ·   a year ago

hoe to get date on index.html page demo data how to show

  ·   just now

{{ reply.comment }}



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

Barry O'Mahony

Barry O'Mahony   ·   a year ago

Hi, There appears to be a bug in the popup (and only the popup). With closeOnSelect = true, tapping the Today button fails to invoke the callback. I think lines 256-258 need to be changed as follows: if (!$scope.mainObj.closeOnSelect) { e.preventDefault(); } else {$scope.mainObj.callback($scope.selctedDateEpoch)}

  ·   just now

{{ reply.comment }}



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

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



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

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



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

Barry O'Mahony

Barry O'Mahony   ·   a year ago

Hi, There appears to be a bug in the popup (and only the popup). With closeOnSelect = true, tapping the Today button fails to invoke the callback. I think lines 256-258 need to be changed as follows: if (!$scope.mainObj.closeOnSelect) { e.preventDefault(); } else {$scope.mainObj.callback($scope.selctedDateEpoch)}

  ·   just now

{{ reply.comment }}



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

Akash Kumar

Akash Kumar   ·   a year ago

hoe to get date on index.html page demo data how to show

  ·   just now

{{ reply.comment }}



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

Rishikesh Vedpathak

Rishikesh Vedpathak   ·   a year ago

App ID is not working in ionic view. It gives an error 'Please enter a valid app id'

  ·   just now

{{ reply.comment }}



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

rohit aneja

rohit aneja   ·   a year ago

Great work Rajeshwar!! it works great and easy to integrate, keep it up...

Rajeshwar

Rajeshwar   ·   a year ago

Thanks @rohitaneja

  ·   just now

{{ reply.comment }}



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

Saim YILDIZ

Saim YILDIZ   ·   a year ago

Great work! I am waiting this plugin for Ionic 2. When you planning release for Ionic 2?

  ·   just now

{{ reply.comment }}



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

Austin Hunter

Austin Hunter   ·   2 years ago

I love this add-on and it is working great! Only thing I want to do is to change the color scheme to match my app's style. I have read the documentation but am confused on how I can change the colors. Any help is appreciated, thank you!

Austin Hunter

Austin Hunter   ·   2 years ago

I am using css

Rajeshwar

Rajeshwar   ·   2 years ago

You can use the css classes i mentioned in the documentation, to change the color of the whole components.

Austin Hunter

Austin Hunter   ·   2 years ago

I've tried, but I can't seem to change the green. I've changed the pop-up background and number colors but I don't want those to change. I want to change the header and buttons

Abhishek Bhimsaria

Abhishek Bhimsaria   ·   2 years ago

Hi @AustinHunter there is a bug in the code. I had the same problem, Then I saw that no matter what css color you give in the css file, it will not change color. First you need to go to: "lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js". Inside this file find the color. default is:#009688, I replaced it with my own color: #5d9cec. But remember after doing these remove the path from index.html and add once again, because it create a cache inside index.html Hope it can Help you. @Rajeshwar please fix this bug.

Rajeshwar

Rajeshwar   ·   2 years ago

Thanks for your solution.

  ·   just now

{{ reply.comment }}



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

Pete Wall

Pete Wall   ·   2 years ago

So far, this plugin is working great. Is there a way to add classes to dates other than the selected date and today? For example, if I want to add colored circles around holidays, or on the weekend days.

Rajeshwar

Rajeshwar   ·   2 years ago

You can use `date_col ` for styling the date cell. Please use this link, in case if you need additional css classes.

  ·   just now

{{ reply.comment }}



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

lenin mariajoseph

lenin mariajoseph   ·   2 years ago

how to display the selected date from this Datepicker?

Rajeshwar

Rajeshwar   ·   2 years ago

If you wish to show the date on the header, that's already configured. If you wish to get the selected date, you can get it in the call back and show it where ever you wish in the page.

  ·   just now

{{ reply.comment }}



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

Aashish R

Aashish R   ·   2 years ago

@Rajeshwar Great component any plans of creating a similar one for ionic2?

piotr

piotr   ·   2 years ago

+1

Rajeshwar

Rajeshwar   ·   2 years ago

Yes, the ionic v2 component is in progress. Soon you can expect this component for inic v2 also.

  ·   just now

{{ reply.comment }}



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

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

When using modal, the buttons cannot see completely. When using popup, in Chrome It doesn't show the buttons Set, Today, Close. It appears: ... ... ...

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

@Rajeshwar, do I need a special CSS?

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

When I am looking in browsers the classes button_set, button_today, button_close, I can't find them.

Rajeshwar

Rajeshwar   ·   2 years ago

Can u share a screenshot of it?

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

https://www.dropbox.com/sh/j5dacbrug4gbhg8/AABICLZ__5WxVWP4A5rmpt9Xa?dl=0

Rajeshwar

Rajeshwar   ·   2 years ago

Please override the css classes which i mentioned in the documentation, so that u can see buttons properly.

  ·   just now

{{ reply.comment }}



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

Andres Herrera Garcia

Andres Herrera Garcia   ·   2 years ago

I'm having troubles using this plug-in into a modal popup in Chrome.

  ·   just now

{{ reply.comment }}



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

James Simoes

James Simoes   ·   2 years ago

Great plugin! Weird issue though -- today on the last day of the month if I choose September on the drop down, it goes to October.

  ·   just now

{{ reply.comment }}



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

Naidion Brovedan

Naidion Brovedan   ·   2 years ago

Hello! When I put an <input type = "date"> The app opens the datepicker android on the Ionic Datepicker. There is a possibility to disable the default android and use only this?

  ·   just now

{{ reply.comment }}



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

Poh Jun Wei

Poh Jun Wei   ·   2 years ago

hi @Rajeshwar , thanks for making this great plugin! So, I'm trying to select month or year only without actually showing the dates. Is it possible to make the datepicker to show only the selection of month/year?

Rajeshwar

Rajeshwar   ·   2 years ago

With the current versions of the component, this is not possible.

  ·   just now

{{ reply.comment }}



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

Kien Gian

Kien Gian   ·   2 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

Kien Gian   ·   2 years ago

Thank your sharing !

Maheshchhetri

Maheshchhetri   ·   2 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>

  ·   just now

{{ reply.comment }}



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

JemliF

JemliF   ·   2 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

Kowsalya

Kowsalya   ·   2 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. :)

Rajeshwar

Rajeshwar   ·   2 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.

Daniele Scotti

Daniele Scotti   ·   2 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!

Alain ANDRÉ

Alain ANDRÉ   ·   2 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.

Louis

Louis   ·   2 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

Rajeshwar

Rajeshwar   ·   2 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.

Rajeshwar

Rajeshwar

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

Juan David Nicholls

Juan David Nicholls   ·   2 years ago

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

chaitanya

chaitanya   ·   3 years ago

Thanks Rajesh for very useful plugin.

Sathish Ravepati

Sathish Ravepati   ·   3 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 ??

Rajesh K

Rajesh K   ·   3 years ago

Thanks Rajesh its cool stuff!

Mark Veenstra

Mark Veenstra   ·   3 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

Gassan

Gassan   ·   3 years ago

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

Rajeshwar

Rajeshwar   ·   3 years ago

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

Gassan

Gassan   ·   3 years ago

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

Gassan

Gassan   ·   3 years ago

on Chrome is fine just FireFox ...?

Gassan

Gassan   ·   3 years ago

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

Rajeshwar

Rajeshwar   ·   3 years ago

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

Gassan

Gassan   ·   3 years ago

on firefox

Gassan

Gassan   ·   3 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 !

Rajeshwar

Rajeshwar   ·   3 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.

Emmanuel Etukudo Etti

Emmanuel Etukudo Etti   ·   3 years ago

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

Gassan

Gassan   ·   3 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.

Andres Mora

Andres Mora   ·   3 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!

Abdul Samad

Abdul Samad   ·   3 years ago

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

Rajeshwar

Rajeshwar   ·   3 years ago

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

leob

leob   ·   3 years ago

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

Raymond Camden

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

Fred

Fred   ·   2 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); };

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

Jose Miguel Ledon   ·     ·   3 years ago

it's awesome

Rajeshwar   ·     ·   3 years ago

Thank you @Jose Miguel Ledon

Michael Clegg   ·     ·   3 years ago

Best timepicker widget i've found. Smooth and easy to implement!

Lev   ·     ·   3 years ago

The best datepicker for ionic that I was able to find with customisations like disabled date.

lindenberg moreira   ·     ·   3 years ago

Great job.

Bi Mo   ·     ·   3 years ago

Nice

Gassan   ·     ·   3 years ago

Great job

Stefan   ·     ·   3 years ago

Not using the widget on my page: 68 watchers. Adding the widget to my page +- 750 watchers. Opening the modal +- 1350 watchers. You should keep # watchers < 2000, so i wouldn't recommend this plugin.

Rajio   ·     ·   3 years ago

Great work, Thanks for the plugin.

Bharadwaj   ·     ·   3 years ago

The ultimate date picker in the market.

Tedy Kanjirathinkal   ·     ·   3 years ago

Awesome! Great job, Rajeshwar!

Sumanth   ·     ·   3 years ago

Thanks for creating this Rajesh...!

sudhamsh   ·     ·   3 years ago

Great Job Rageshwar..

Shivashankar Galla   ·     ·   3 years ago

Well done Rajesh... Keep Rocking..

Shivashankar Galla   ·     ·   3 years ago

Well done Rajesh... Keep Rocking..

Shivashankar Galla   ·     ·   3 years ago

Well done Rajesh... Keep Rocking..

Steve Chactue Akono   ·     ·   3 years ago

Great Job

Anastasios Alexiou   ·     ·   3 years ago

Thanks Rajesh!

Gilberto Us Avilés   ·     ·   3 years ago

¡Muy bien!, sigan adelante

Khaled_   ·     ·   3 years ago

Well done

chaitanya   ·     ·   3 years ago

You deserve many more starts.

WILLIAM CORREA   ·     ·   3 years ago

Keep like this and better!

Arturo Volpe   ·     ·   3 years ago

Work's very well

ayman   ·     ·   3 years ago

Thanks

Duong Tran   ·     ·   3 years ago

Work like charm. thank you for your awesome work

Louis   ·     ·   2 years ago

thanks !

Alain ANDRÉ   ·     ·   2 years ago

good !

Yunus DEMİR   ·     ·   2 years ago

great works!!!

Keyur P   ·     ·   2 years ago

Awesome

Emilio Fernández Caro   ·     ·   2 years ago

Great!!

karol   ·     ·   2 years ago

.

Atif Qayyum   ·     ·   2 years ago

Great work man n above all total free ;)

Hoàng Văn An   ·     ·   2 years ago

good :)

Edwin Lijnzaad   ·     ·   2 years ago

Thanks!

Melwin   ·     ·   2 years ago

Great work man :)

Daniele Scotti   ·     ·   2 years ago

Gooood!

Alasdair   ·     ·   2 years ago

Thanks

Kien Gian   ·     ·   2 years ago

Great !

Siddharth   ·     ·   2 years ago

Great!!!!

Mattia Casella   ·     ·   2 years ago

Very useful!!

David   ·     ·   2 years ago

Good job! You are awesome!

Andres Herrera Garcia   ·     ·   2 years ago

Very good and easy-to-use plug-in.

Gaurish   ·     ·   2 years ago

Super Plugin Keep up the good work

George simon   ·     ·   2 years ago

Awesome.

Eriks   ·     ·   2 years ago

Thanks!

Grzegorz Brzezinka   ·     ·   2 years ago

awesome, thanks!

Tyrone Lim   ·     ·   2 years ago

thanks

theo   ·     ·   2 years ago

Great. Easy to use.

Joseph Mujaho   ·     ·   2 years ago

Awesome!!! Easiest plugin I have ever used so far.

Ali Zafar   ·     ·   2 years ago

Great plugin!

dav   ·     ·   a year ago

great!!!

Barry O'Mahony   ·     ·   a year ago

Thanks! Just what my users wanted. Far better than the ngCordova date picker

Alexandre Awada   ·     ·   7 months ago

Thanks!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Alexandre Awada    ·     ·   7 months ago

Thanks!

Barry O'Mahony    ·     ·   a year ago

Thanks! Just what my users wanted. Far better than the ngCordova date picker

dav    ·     ·   a year ago

great!!!

Ali Zafar    ·     ·   2 years ago

Great plugin!

Joseph Mujaho    ·     ·   2 years ago

Awesome!!! Easiest plugin I have ever used so far.

theo    ·     ·   2 years ago

Great. Easy to use.

Tyrone Lim    ·     ·   2 years ago

thanks

Grzegorz Brzezinka    ·     ·   2 years ago

awesome, thanks!

Eriks    ·     ·   2 years ago

Thanks!

George simon    ·     ·   2 years ago

Awesome.

Gaurish    ·     ·   2 years ago

Super Plugin Keep up the good work

Andres Herrera Garcia    ·     ·   2 years ago

Very good and easy-to-use plug-in.

David    ·     ·   2 years ago

Good job! You are awesome!

Mattia Casella    ·     ·   2 years ago

Very useful!!

Siddharth    ·     ·   2 years ago

Great!!!!

Kien Gian    ·     ·   2 years ago

Great !

Alasdair    ·     ·   2 years ago

Thanks

Daniele Scotti    ·     ·   2 years ago

Gooood!

Melwin    ·     ·   2 years ago

Great work man :)

Edwin Lijnzaad    ·     ·   2 years ago

Thanks!

Hoàng Văn An    ·     ·   2 years ago

good :)

Atif Qayyum    ·     ·   2 years ago

Great work man n above all total free ;)

karol    ·     ·   2 years ago

.

Emilio Fernández Caro    ·     ·   2 years ago

Great!!

Keyur P    ·     ·   2 years ago

Awesome

Yunus DEMİR    ·     ·   2 years ago

great works!!!

Rajeshwar    ·     ·   3 years ago

Thank you @Jose Miguel Ledon

Louis    ·     ·   2 years ago

thanks !

Duong Tran    ·     ·   3 years ago

Work like charm. thank you for your awesome work

ayman    ·     ·   3 years ago

Thanks

Arturo Volpe    ·     ·   3 years ago

Work's very well

WILLIAM CORREA    ·     ·   3 years ago

Keep like this and better!

chaitanya    ·     ·   3 years ago

You deserve many more starts.

Khaled_    ·     ·   3 years ago

Well done

Gilberto Us Avilés    ·     ·   3 years ago

¡Muy bien!, sigan adelante

Anastasios Alexiou    ·     ·   3 years ago

Thanks Rajesh!

Steve Chactue Akono    ·     ·   3 years ago

Great Job

Shivashankar Galla    ·     ·   3 years ago

Well done Rajesh... Keep Rocking..

Shivashankar Galla    ·     ·   3 years ago

Well done Rajesh... Keep Rocking..

Shivashankar Galla    ·     ·   3 years ago

Well done Rajesh... Keep Rocking..

sudhamsh    ·     ·   3 years ago

Great Job Rageshwar..

Sumanth    ·     ·   3 years ago

Thanks for creating this Rajesh...!

Tedy Kanjirathinkal    ·     ·   3 years ago

Awesome! Great job, Rajeshwar!

Bharadwaj    ·     ·   3 years ago

The ultimate date picker in the market.

Rajio    ·     ·   3 years ago

Great work, Thanks for the plugin.

Stefan    ·     ·   3 years ago

Not using the widget on my page: 68 watchers. Adding the widget to my page +- 750 watchers. Opening the modal +- 1350 watchers. You should keep # watchers < 2000, so i wouldn't recommend this plugin.

Gassan    ·     ·   3 years ago

Great job

Bi Mo    ·     ·   3 years ago

Nice

lindenberg moreira    ·     ·   3 years ago

Great job.

Lev    ·     ·   3 years ago

The best datepicker for ionic that I was able to find with customisations like disabled date.

Michael Clegg    ·     ·   3 years ago

Best timepicker widget i've found. Smooth and easy to implement!

Jose Miguel Ledon    ·     ·   3 years ago

it's awesome

Alain ANDRÉ    ·     ·   2 years ago

good !