Ionic Date Picker Range?

Ionic Framework ionic-v3
13

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

1 Like