search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.37k stars 850 forks source link

v-date-picker with drag and drop #1209

Open ghost opened 1 year ago

ghost commented 1 year ago

Question: Is it possible to add drag & drop to the daterange option of the v-date-picker?

How should it behave: When a date range is already set, the user should be able to drag the selected range, move it around and when the range is dropped the the range is selected. image Moving outside of the current visible month calendar, moves the view the next/previous month. Just clicking a date resets the range and the user has to select a new end date to get a new range (behaves as currently then)

The reason: The reason is a UX decision: when a date range will be changed by a user, it often happens that the current exact range is no longer in the mind of the user. So the range keeps as it is, as the user moves the selection bar.

mdwheele commented 7 months ago

@nathanreyes If this is a feature you would be amenable to having built-in, I can take a look at implementation. I don't think this can currently be implemented in user-land without some hacks.

The direction I would likely start with is just emitting extra events. This way, the behaviour can be implemented / proofed-out in user-land by manipulating the range stored in modelValue. There are a lot of UX edge-cases to account for that may be better to prove outside the library. Adding some extra interactivity events might give us the hooks we need to get started.