Date range selector

[moseleyi]

Hi,

I've been on a hunt for good datepicker for a while, chiefly because I wanted to stop using jQuery widget. Configuration options in pickadate are awesome but I was wondering if you're planning on building a possibility of selecting a range of dates in one datepicker?

[DanielRuf]

Ranges are already supported, see the API docs.

[moseleyi]

Can you point me in the right direction? I'm looking here: http://amsul.ca/pickadate.js/date and can't see any mention of range selection

[DanielRuf]

Search for "range" on http://amsul.ca/pickadate.js/api/

[moseleyi]

But isn't this just to disable certain dates? What I'm looking for is for example selecting May 1st, then highlighting everything from that data until I click on, for example, May 10th and it returns the range

[DanielRuf]

See https://github.com/amsul/pickadate.js/issues/446

[pirco]

looking at #446 I don't see an answer to the original question which I'm pursuing myself. not looking to DISable ranges I need a (single) calendar that allows users to pick a check-in date and a check-out date, as it were.

I certainly see that #446 mentions is feature having been added but it's not clear how to enable or implement it.

[DanielRuf]

v4 is not yet released and there is just the separate v4 branch.

[adam-jones-net]

I'm concluding that the broad definition of a calendar picker with date range support is not what the developers of this plugin understand range to mean.

I like many others I believe understand range in the context of date pickers to mean that you can pick two dates in the same calendar and the calendar fills in the dates between those two points with colour so that the user can see a range of dates selected. Ie a calendar as you'd see on a hotel booking site where two date inputs are required.

I understand that the developers of this plugin are using the term for functionality they have created to disable a range of dates from being selected when the calendar is defined.

I've seen so many posts on github here telling people to look at other issue numbers, especially 446. Yes that talks about ranges but not in the way that I believe many people searching the library are looking for.

From what I understand, the library doesn't support picking two dates over a range and visualising that, or am I wrong? I'd love to be corrected if so.

[mikhailcodes]

As of 2023, still unable to find anything on this, which is a shame because this plugin is good otherwise.

Edit:

In case anyone needs some insight on how to probably use this as a range slider, I did some implementation here.

const datePickerSettings = {
    format: 'dddd, dd mmm, yyyy',
    formatSubmit: "yyyy/mm/dd",
    hiddenName: true,
    min: +1,
    highlight: true,
};

const startPicker = startPickerElement.pickadate('picker');
const endPicker = endPickerElement.pickadate('picker');

startPicker.on('set', () => {
    const selectedDate = startPicker.get('select', 'yyyy-mm-dd');
    const [year, month, day] = selectedDate.split("-");
    endPicker.set('min', new Date(year, month - 1, day));
});

endPicker.on('set', () => {
    const selectedDate = endPicker.get('select', 'yyyy-mm-dd');
});