Using Litepicker (https://github.com/wakirin/litepicker/) I’m having troubles adding lockDays to my calendar.
I’m retrieving some data from my DB and this is the JSON answer:
{
"error":0,
"reservation_counter":1,
"reservations":[
{
"start_date":"2022-02-28 00:00:00",
"end_date":"2022-03-02 00:00:00"
}
]
}
Then I format the dates fields with this JS script
const obj = JSON.parse(result);
if(parseInt(obj.error) === 0) {
var lockedArray = [];
if(parseInt(obj.reservation_counter) > 0){
for (let i = 0; i < parseInt(obj.reservation_counter); i++) {
let subArray = [obj.reservations[i].start_date.slice(0, 10), obj.reservations[i].end_date.slice(0, 10)];
lockedArray.push(subArray);
}
}
}
The output of this code is, as string: [["2022-02-28", "2022-03-02"]]
, so is compliant with the Litepicker format.
To render the calendar, I use this script:
$('input[name="litepicker"]').daterangepicker({
parentEl: "#calendarelement-div",
opens: 'center',
inlineMode: false,
minDate: new Date(),
autoUpdateInput: true,
singleMode: false,
locale: {
format: "DD/MM/YYYY",
separator: " - "
},
lockDaysFormat: 'YYYY-MM-DD',
lockDays: lockedArray,
disallowLockDaysInRange: true,
highlightedDays: lockedArray
});
The calendar is fully working, but it not locks the dates. I tried with hand-coded dates, but nothing.
This is an image of the result:
The expected resut is dates between 2022-02-28 and 2022-03-02 are locked, as JSON data.