Ionic Date Picker Range?


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


Mani Selvam .R


Why not use the standard ion-datetime component?


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, and i have asked question in stackoverflow this the link:- so please check update the plunker as well to know the solution…


Mani Selvam .R


I wrote a plugin , hope to help you


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



great job @HsuanXyz, it really saves a lot of time and works very well…


@HsuanXyz just wanted to give you some serious kudos. That plugin is amazing! Really really great work man.


Hi HsuanXyz, I’m using your plugin, but I can’t custom style for calendar.

const options: CalendarModalOptions = {
                title: '',
                monthFormat: 'MM YYYY',
                doneLabel: value.done,
                closeLabel: value.cancel,
                cssClass: 'calendar'

and my class

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


@HsuanXyz will it work for ionic-3 and upgraded version??


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



Thanks for the reply


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,


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:

	//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.onDidDismiss((date: { from: CalendarResult; to: CalendarResult }, type: string) => { 
// 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 :slight_smile:



I tried this option but, closeicon,defaultscroll to, doneicon are not define property. Can u help me in this


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