# Ionic Date Picker Range? **URL:** \ **Category:** ionic-v3\ **Created:** [January 11, 2017, 9:48am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854 "2017-01-11T09:48:45Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![manie21](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@manie21](https://forum.ionicframework.com/u/manie21)\ **Post date:** [January 11, 2017, 9:48am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/1 "2017-01-11T09:48:45Z")
Hi All, Hi all I’m new for Ionic 2, I’m trying to use the Date Picker in my ionic 2 app, i have tried many ways but all are not useful to us, so please any one knows the ideas to do the ionic 2 date picker please help to us, I have tired to do the date picker of following link :- [https://www.npmjs.com/package/datepicker-ionic2](https://www.npmjs.com/package/datepicker-ionic2) but it’s not working to me showing lots of errors, So any of one knows the solution please provide the exact solution to do the ionic 2 date picker and please give some working plunkers… Thanks, Mani Selvam .R ---
**Author:** ![mirkonasato](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mirkonasato/32/131398_2.png) [@mirkonasato](https://forum.ionicframework.com/u/mirkonasato)\ **Post date:** [January 11, 2017, 1:09pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/2 "2017-01-11T13:09:23Z")
Why not use the standard [ion-datetime](http://ionicframework.com/docs/v2/api/components/datetime/DateTime/) component? ---
**Author:** ![manie21](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@manie21](https://forum.ionicframework.com/u/manie21)\ **Post date:** [January 12, 2017, 12:08pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/3 "2017-01-12T12:08:32Z")
we have tried ion-datetime but we expecting to do like mentioned image of datepicker in my app…we have tried many ways but all are not useful so can you provide the suggestion and solution, thanks ![image](https://global.discourse-cdn.com/ionicframework/original/3X/8/5/85a4a7751030c7621a38f1f52b3c5e3fdf028859.png), and i have asked question in stackoverflow this the link:- [http://stackoverflow.com/questions/41610110/dynamic-datepicker-with-repeat-option-similar-to-alarm](http://stackoverflow.com/questions/41610110/dynamic-datepicker-with-repeat-option-similar-to-alarm) so please check update the plunker as well to know the solution… thanks Mani Selvam .R ---
**Author:** ![HsuanXyz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hsuanxyz/32/108884_2.png) [@HsuanXyz](https://forum.ionicframework.com/u/HsuanXyz)\ **Post date:** [March 14, 2017, 4:34am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/4 "2017-03-14T04:34:05Z")
I wrote a plugin , hope to help you > **[HsuanXyz/ion2-calendar](https://github.com/HsuanXyz/ion2-calendar)** > > ion2-calendar - 📅 A date picker components for ionic2 ／ionic3 ---
**Author:** ![caribesoft](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/caribesoft/32/12570_2.png) [@caribesoft](https://forum.ionicframework.com/u/caribesoft)\ **Post date:** [July 16, 2017, 8:02am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/5 "2017-07-16T08:02:34Z")
Hi, I just test your Plugin and it’s incredible, congratulations! It works on Android devices very well, but on IOS device, is not working, the calendar doesn’t show. Can you give me a tip to fix this issue. I’m testing on iPhone 4 with OS 9.3.3 Regards, Victor ---
**Author:** ![nnicolopez](https://avatars.discourse-cdn.com/v4/letter/n/ba9def/32.png) [@nnicolopez](https://forum.ionicframework.com/u/nnicolopez)\ **Post date:** [March 9, 2018, 2:36pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/6 "2018-03-09T14:36:29Z")
great job @HsuanXyz, it really saves a lot of time and works very well… ---
**Author:** ![meatloaf4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meatloaf4/32/107396_2.png) [@meatloaf4](https://forum.ionicframework.com/u/meatloaf4)\ **Post date:** [March 29, 2018, 6:57pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/7 "2018-03-29T18:57:02Z")
@HsuanXyz just wanted to give you some serious kudos. That plugin is amazing! Really really great work man. ---
**Author:** ![healer12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/healer12/32/116518_2.png) [@healer12](https://forum.ionicframework.com/u/healer12)\ **Post date:** [August 14, 2018, 5:57pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/8 "2018-08-14T17:57:08Z")
Hi HsuanXyz, I’m using your plugin, but I can’t custom style for calendar. ```auto const options: CalendarModalOptions = { title: '', monthFormat: 'MM YYYY', doneLabel: value.done, closeLabel: value.cancel, cssClass: 'calendar' }; ``` and my class ```auto .calendar { .toolbar-md-primary .toolbar-background-md { background: #8727a7; } .week-title.primary { margin: 0; color: #fff; height: 44px; width: 100%; background-color: #8727a7; padding: 15px 0; } .toolbar-md-primary .bar-button-default-md, .toolbar-md-primary .bar-button-outline-md, .toolbar-md-primary .toolbar-title-md { color: #fff; margin-right: 21px; } ``` ---
**Author:** ![nikitarane](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@nikitarane](https://forum.ionicframework.com/u/nikitarane)\ **Post date:** [October 4, 2018, 10:05am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/9 "2018-10-04T10:05:05Z")
@HsuanXyz will it work for ionic-3 and upgraded version?? ---
**Author:** ![saberprashant](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@saberprashant](https://forum.ionicframework.com/u/saberprashant)\ **Post date:** [October 22, 2018, 2:53pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/10 "2018-10-22T14:53:46Z")
Hey, sorry for delay, but the answer is yes. It works well with ionic-3 both for android and iOS. If you need any code help then reply back for the same. Thanks 🙂 ---
**Author:** ![nikitarane](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@nikitarane](https://forum.ionicframework.com/u/nikitarane)\ **Post date:** [October 22, 2018, 3:23pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/11 "2018-10-22T15:23:33Z")
Hey, Thanks for the reply ---
**Author:** ![nikitarane](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@nikitarane](https://forum.ionicframework.com/u/nikitarane)\ **Post date:** [October 22, 2018, 3:25pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/12 "2018-10-22T15:25:36Z")
Hey I was waiting for your reply, I want to make visible all days for previous days and month. I have used ion-2 component option in which I can select day from today only. Please help me in this, ---
**Author:** ![saberprashant](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@saberprashant](https://forum.ionicframework.com/u/saberprashant)\ **Post date:** [October 23, 2018, 7:32am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/13 "2018-10-23T07:32:45Z")
Hey, if you want to provide a defined date range in which the user can select the range of dates, then you should do something like this: ```auto //for new range based datepicker openCalendar() { let fromDate: any = new Date("1/01/2017"); //default starting date for calendar let toDate: any = new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0, 0, 0, 0) toDate = new Date(toDate); const options: CalendarModalOptions = { pickMode: 'range', title: 'Select Date Range', closeIcon: true, doneIcon: true, from: fromDate, to: toDate, defaultScrollTo: toDate, }; let myCalendar = this.modalCtrl.create(CalendarModal, { options: options }); myCalendar.present(); myCalendar.onDidDismiss((date: { from: CalendarResult; to: CalendarResult }, type: string) => { //.....do what you want to do on dismissing the calendar modal :) }); } ``` So, if you want to set the start date as `1 Jan 2018`, simply set the `fromDate` as `"1/01/2018"`, and do the same for `toDate`. I hope this helps 🙂 ---
**Author:** ![nikitarane](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@nikitarane](https://forum.ionicframework.com/u/nikitarane)\ **Post date:** [October 24, 2018, 4:09am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/14 "2018-10-24T04:09:08Z")
> [@saberprashant](#): > > toDate Thanks, I tried this option but, closeicon,defaultscroll to, doneicon are not define property. Can u help me in this ---
**Author:** ![saberprashant](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@saberprashant](https://forum.ionicframework.com/u/saberprashant)\ **Post date:** [October 26, 2018, 7:54am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/15 "2018-10-26T07:54:39Z")
Hey, You only need to set true or false for `doneIcon` and `closeIcon` as they are boolean properties, and for `defaultScrollTo`, set a particular date for it like `today's date` ---
**Author:** ![mrc\_prasad](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@mrc\_prasad](https://forum.ionicframework.com/u/mrc_prasad)\ **Post date:** [March 27, 2019, 6:22am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/16 "2019-03-27T06:22:49Z")
This is not working in ionic 3 version. Getting lot of errors while compiling the app. Share a possible solution. ionic - 3.9.2 angular cli - 7.1.3 ---
**Author:** ![mrc\_prasad](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@mrc\_prasad](https://forum.ionicframework.com/u/mrc_prasad)\ **Post date:** [March 27, 2019, 6:23am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/17 "2019-03-27T06:23:28Z")
This is not working in ionic 3 version. Getting lot of errors while compiling the app. Please share a possible solution. ionic - 3.9.2 angular cli - 7.1.3 ---
**Author:** ![saberprashant](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@saberprashant](https://forum.ionicframework.com/u/saberprashant)\ **Post date:** [March 28, 2019, 11:00am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/18 "2019-03-28T11:00:36Z")
Hey @mrc_prasad, I am also using ionic-3 and it is working fine for me both on Android and iOS, what problem are you facing exactly? Please comment your console errors, so that I can reference. Thanks 🙂 ---
**Author:** ![mrc\_prasad](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@mrc\_prasad](https://forum.ionicframework.com/u/mrc_prasad)\ **Post date:** [March 28, 2019, 5:57pm UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/19 "2019-03-28T17:57:30Z")
Hi Prashant, ``` I am getting issue like instead of ionic-angular package the plugin is importing @ionic/angular issue. This is the issue ionic is throwing. Please share a possible solution. ``` ---
**Author:** ![dotman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dotman/32/124290_2.png) [@dotman](https://forum.ionicframework.com/u/dotman)\ **Post date:** [March 29, 2019, 9:44am UTC](https://forum.ionicframework.com/t/ionic-date-picker-range/75854/20 "2019-03-29T09:44:54Z")
I am also getting the same error [Next page](https://forum.ionicframework.com/t/ionic-date-picker-range/75854.md?page=2)