qodesmith / datepicker

Get a date with JavaScript! A datepicker with no dependencies.
344 stars 101 forks source link

How to display 3 months for selection #117

Closed shepards closed 3 years ago

shepards commented 3 years ago

I'd like to use this library and I'm not a JS guru so it's not obvious to me. Is it possible to display 3 months - on a sliding scale? I tried using a picker1, picker2, picker3 scenario but only the 1st calendar renders.

Use case: In the next shopping season, the date selection needs to pop up and display, for example, Oct, Nov, Dec. No date ranges are wanted. The user simply needs to select a single available date. If it can be done how would I do that?

Thanks.

qodesmith commented 3 years ago

Hey @shepards. Are you looking to have 3 months side-by-side with a single input field for the date? Help me understand a bit more what you're trying to do. You'll likely have to do a little JS wizardry to accomplish what you want, but I can help you out if you give me more context.

shepards commented 3 years ago

Thanks for the reply.

Yes, Side by Side by Side. So if it's October I need to tell the script to show 3 months across so the user will October, November and December. (CSS and FLEXbox would help with the position and styling. Every date that is not disabled will need to be selectable and when the date is clicked that selected "day" becomes the value of the input so a form can process that as a selected date for shipping for instance. I want the user to select only one day. If they select more than one date, only the last date is assigned to the input.

I think your default configuration options will work perfectly, but I don't see how I can display the current month plus the next two.

Scott

qodesmith commented 3 years ago

@shepards Ok my friend. Here's a fiddle that has 3 datepickers and a single input. Changing the month on any calendar auto adjusts the others. Picking on any calendar works as expected :)

shepards commented 3 years ago

Thank you so much. I wouldn't have figured it out.