Ionic Date Picker Range?

Ionic Framework ionic-v3
1

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

1 Like
2

Why not use the standard ion-datetime component?

3

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, thanksimage, and i have asked question in stackoverflow this the link:- 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

1 Like
4

I wrote a plugin , hope to help you

13 Likes
5

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

3 Likes
6

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

2 Likes
7

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

1 Like
8

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;
    }
9

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

10

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:

1 Like
11

Hey,

Thanks for the reply

12

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,

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
14

Thanks,

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

15

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

16

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

17

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

18

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

19

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

I am also getting the same error