setDates and setDateRanges for multiselect plugin

[macway]

Is your feature request related to a problem? Please describe. What I would like to achieve is a calendar with multiple dates or date ranges marked (selected or highlighted) that can be modified by the user.

Describe the solution you'd like It would be useful to have a "setDates" method for multiselect plugin, which whould take an array of dates as an argument and "setDateRanges" for multiple date ranges too.

[Eric-P7]

This seems similar to Issue #21, which led to the addition of setHighlightedDays()

However I'm not sure how to use the setHighlightedDays() function to reproduce a second set of inputs that matches the screenshot provided by the op in that issue. I too am in need of that functionality.

[piotrpalek]

Are highlightedDays even used by the "multiselect" plugin? From looking at the source it doesn't seem so to me.

For now I've just manually did picker.multipleDates = [1618437600000, 1618956000000, 1619042400000, 1619128800000]; if anyone is wondering how one might approach this issue.

[thehopwood]

@piotrpalek ... manually setting that array does not update the calendar as far as I can see. is there something else i should be doing?

[piotrpalek]

@thehopwood sorry I don't have access to the code anymore to check, and don't remember it off hand :(

[goaround]

I run into the same issue.

I can't find a way to predefine or set multipleDates. Everything I tried, failed.

Even setting multiple dates, e.g. 2021-11-01,2021-11-05 to an input element, does not work: https://jsfiddle.net/goaround/9emspbak/6/

I tried to set it via the setup as an event, e.g.

setup: picker => {
    picker.on('before:show', () => {
      picker.preMultipleDates = [1618437600000, 1618956000000, 1619042400000, 1619128800000];
    });
}

... does not work.

I am grateful for any ideas!

[hopolivier]

Hi, In case anyone is still interested in a solution, it worked for me the following way. After datepicker init, I initialized both the associated tag value (with a string value) AND the picker.multipleDates property (with a timestamp array) :

Suppose you have a string format to Date conversion function, eg (I use "DD/MM/YYYY" format) :

function combineTextDateAndTime(textDate, textTime) {
  // combine text date and text time and returns a Date object
  let okDate = (textDate == "" ? new Date().toLocaleDateString("fr-FR") : textDate);
  let okTime = (textTime == "" ? "0:0" : textTime);
  let day = okDate.split("/")[0];
  let month = okDate.split("/")[1];
  let year = okDate.split("/")[2];
  let hour = okTime.split(":")[0];
  let minutes = okTime.split(":")[1];
  return new Date(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10), parseInt(hour, 10), parseInt(minutes, 10));
}

You can init the datepicker first :

myDatesPicker = new Litepicker({
  element: document.querySelector("#my-datepicker"),
  plugins: ['multiselect'],
  // ...
  // other lines of litepicker init
  // ...
});

Then initialize the associated tag value :

let preselectedDatesString = "22/01/2022,03/02/2022,09/03/2022";
document.querySelector("#my-datepicker").value = preselectedDatesString;

And initialize the preselected dates - use timestamps only :

myDatesPicker.multipleDates = preselectedDatesString.split(",").map(dateString =>
  combineTextDateAndTime(dateString, "").getTime());

That's it.

[goaround]

I found a solution that works for me, too. I forked Litepicker for this reason and added a datesoption and a method setMultipleDates: https://github.com/goaround/Litepicker/commit/908b745efe3ad3372d55e06a41632e87b5108ff2?diff=unified

I also published it on npm: https://www.npmjs.com/package/@goaround/litepicker But I can't maintain it: The npm dependencies of Litepicker are very outdated for the build process and I can't run it on my new M1 Macbook anymore.