Range datepicker modes

[lubomirblazekcz]

Hello there,

probably the best and maintained datepicker out here. I've been using air datepicker for a long time, but it's not maintained anymore and there was not a better alternative, but there is now. Really thanks for you work!

To my question. currently there is option for range slider to slip it into two inputs, would be also possible to add option to make it in one input? eg. http://t1m0n.name/air-datepicker/docs/#example-range

It would also be nice to have an option to extend it into two calendars beside each other (in one input again), like here https://wakirin.github.io/Litepicker/ I think it could be more user friendly in some cases.

[mymth]

Thank you for introducing another date pickers I didn't know.

I'm sorry if you already know this, but that range picker behavior is the same as Flatpickr's. And Flatpickr also has the same multi-month display feature. It's somehow not in their example page, but you can see it on the demo page of my Flatpickr theme.

Since these date/date range pickers are designed based on the basic ideas of Bootstrap-datepicker, some fundamental design changes are needed to adopt those features. So it can't happen any time soon (It isn't difficult to guess that making multi-month display in the days view work nicely with the months/years views is not so easy, is it?) and may never happen because I'm not sure if it's a good idea to make this date picker like Flatpickr when it's already there and actively maintained.

I think, if you are in a situation where those range picker features give better usability to your target audiences, then Flatpickr is the right tool for you.

[allestaire]

I guess the date range picker is not the same as FlatPickers, The version that this package provide is bad UX, it should be when the date is complete and the user wanted to select new date, it should start from the beginning, not continuing what values left.

https://github.com/mymth/vanillajs-datepicker/assets/68372409/848121bb-6e24-4c76-9f5e-c490968c8de9

As you can see, on this video, the selection continues, it should start from the beginning

https://github.com/mymth/vanillajs-datepicker/assets/68372409/bd50dc2a-93b7-4a83-9976-95886c7531f1

[mymth]

@allestaire, did I say the date range picker of this library is the same as Flatpickr?

What I said was:

• Air Datepicker's behavior (not this library's; their example page is https://air-datepicker.com/examples now) is the same as Flatpicker's.
• I recommend using Flatpickr (instead of this library) if that behavior is the key feature for you because...
  • this library is based on Bootstrap-datepicker (not Flatpickr)
  • making this library work like Flatpickr needs fundamental design changes
  • it's questionable to me if it's worth making such a big effort to imitate Flatpickr, when Flatpickr is actively maintained

I created this library because I needed a vanilla JS replacement for bootstrap-datepicker but couldn't find anything to meet my needs for typing capability to edit the date string in the input field. So, It's made to provide things that work similarly to bootstrap-datepicker; providing the UX you say it should be is not a goal of this library.

Air Datepicker required jQuery at the time, but it's vanilla JS now. Flatpickr is not so active like before, but not discontinued. Litepicker is already discontinued, but has evolved(?) to easepick. So, there are at least 3 date range picker libraries that satisfy the requirements for your good UX. If you think this library's UX is bad, why don't you just ignore this library and use one of those, instead of dissing after not reading carefully? I'd be happy for you to use the tool that fits your needs best, no matter what it is, and would like everyone to do so too.

[allestaire]

@allestaire, did I say the date range picker of this library is the same as Flatpickr?

What I said was:

• Air Datepicker's behavior (not this library's; their example page is https://air-datepicker.com/examples now) is the same as Flatpicker's.

• I recommend using Flatpickr (instead of this library) if that behavior is the key feature for you because...

  • this library is based on Bootstrap-datepicker (not Flatpickr)
  • making this library work like Flatpickr needs fundamental design changes
  • it's questionable to me if it's worth making such a big effort to imitate Flatpickr, when Flatpickr is actively maintained

I created this library because I needed a vanilla JS replacement for bootstrap-datepicker but couldn't find anything to meet my needs for typing capability to edit the date string in the input field. So, It's made to provide things that work similarly to bootstrap-datepicker; providing the UX you say it should be is not a goal of this library.

Air Datepicker required jQuery at the time, but it's vanilla JS now. Flatpickr is not so active like before, but not discontinued. Litepicker is already discontinued, but has evolved(?) to easepick. So, there are at least 3 date range picker libraries that satisfy the requirements for your good UX. If you think this library's UX is bad, why don't you just ignore this library and use one of those, instead of dissing after not reading carefully? I'd be happy for you to use the tool that fits your needs best, no matter what it is, and would like everyone to do so too.

Sorry for that, and thanks for the clarification 👍

[jramke]

Hey,

i like the approach of the two separate input fields. For example airbnb also implemented it like this. However i would also love to be able to show two month side by side in favor of further improved ux. As answer to the first message above you stated out that there would be fundamental design changes needed. Was that also related to the multi days view or just the single input for the range picker?

Thanks for your time!

[mymth]

That's the second part of the original question. So, the answer to it is included in my first comment.

Fundamental design changes actually need more for it than range-in-one-picker. For range in one picker, it's mostly for click event handling. For multi-calendars in one picker, we need to consider how to show the view switch button, whose label is the month/year of the calendar, and what to do when the view is changed to month/year/decade view.
 Both Flatpickr and easepick don't have month/year views and minView/pickLevel feature. Therefore, they don't have this problem. Air Datepicker has month/year views, like this library, and also doesn't support multi-calendars-in-one-picker.

We also need to reconsider how initial view (focused) date (not to be confused with defaultViewDate) should be set and displayed. Currently, it's set to the lastly selected date (if none is selected, defaultViewDate is used). And when the picker hides, the view is reset to the month/year of the initial view date so that the picker always shows the calendar of the selected date when it opens next time. In multi-date mode, the lastly selected date is not necessarily the latest or the earliest one in the selection. Therefore, we can't show it in the first or last calendar in the picker in a fixed manner. easepick doesn't support multi-date mode. Flatpickr and Air Datepicker support it, but they both don't have the initial view date feature—they keep showing the same month/year shown at hiding when the picker opens next time. (e.g. assume you open a picker, select the 3rd of March, click the next button twice to show May's calendar, and hide the picker. Flatpickr and Air Datepicker show May when you re-open the picker, while this library shows March.) So, none of those 3 has the same problem as this library

I have no interest in making this library a big, complex one that does everything. In my thoughts, it's already too big. I'd like to keep it as simple and small as possible. easepick allows you to have a date range picker with both 2 separate inputs and multi-calendars in a picker. If you like that UI, it's probably the tool that fits your needs the best, though you have to give up better keyboard operation support and the ability to edit the date string in the input field. (I think it's a trade-off)

[jramke]

Thanks a lot for clearing that up!

I totally get where you're coming from with keeping things simple and not wanting to make the library overly complex.

After considering your explanation, it seems like easepick would be a good fit for what I currently need, even if it means sacrificing some keyboard operation support and date string editing.

Appreciate your help in making this decision!

Cheers