Open macway opened 3 years ago
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.
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.
@piotrpalek ... manually setting that array does not update the calendar as far as I can see. is there something else i should be doing?
@thehopwood sorry I don't have access to the code anymore to check, and don't remember it off hand :(
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!
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.
I found a solution that works for me, too. I forked Litepicker for this reason and added a dates
option 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.
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.