Hi team,
It’s been a while since I’ve been on here but I’m wondering if anyone would be able to help me with a problem I’m having with disabling dates on a date picker.
I have the code working below but it’s restrictive to the number of lines returned within the array. I was thinking this could maybe be solved by using a loop with a variable using the total count of the query?
async function disableDates(){
let data = await wixData.query('DisabledDates').find();
let items = data.items;
let firstStart = items[0].disableStartDate;
let firstFinish = items[0].disableFinishDate;
let secondStart = items[1].disableStartDate;
let secondFinish = items[1].disableFinishDate;
let thirdStart = items[2].disableStartDate;
let thirdFinish = items[2].disableFinishDate;
let formatted_firstStart = firstStart.getFullYear() + "," + (firstStart.getMonth() + 1) + "," + firstStart.getDate();
let formatted_firstFinish = firstFinish.getFullYear() + "," + (firstFinish.getMonth() + 1) + "," + firstFinish.getDate();
let formatted_secondStart = secondStart.getFullYear() + "," + (secondStart.getMonth() + 1) + "," + secondStart.getDate();
let formatted_secondFinish = secondFinish.getFullYear() + "," + (secondFinish.getMonth() + 1) + "," + secondFinish.getDate();
let formatted_thirdStart = thirdStart.getFullYear() + "," + (thirdStart.getMonth() + 1) + "," + thirdStart.getDate();
let formatted_thirdFinish = thirdFinish.getFullYear() + "," + (thirdFinish.getMonth() + 1) + "," + thirdFinish.getDate();
var a1 = getDates(new Date(formatted_firstStart), new Date(formatted_firstFinish)),
a2 = getDates(new Date(formatted_secondStart), new Date(formatted_secondFinish)),
a3 = getDates(new Date(formatted_thirdStart), new Date(formatted_thirdFinish)),
let joined = Array.prototype.concat.apply([], [a1, a2, a3]);
$w('#dateInput').disabledDates = joined;
}
function getDates (startDate, endDate) {
const dates = []
let currentDate = startDate
const addDays = function (days) {
const date = new Date(this.valueOf())
date.setDate(date.getDate() + days)
return date
}
while (currentDate <= endDate) {
dates.push(currentDate)
currentDate = addDays.call(currentDate, 1)
}
return dates
}
Obviously the code will only let me disable between two dates, from 3 items in the database. Before I start down a long hole of frustration, would anyone be able to advise if this is possible using a loop with the total count of items that are returned from the query?
Thanks as ever!
Would anyone have any insight with this?
The disabledDates property requires an array of dates to be disabled . You can create this array by using the information contained in the database. For each start/finish, you will need to create individual dates to add to the array.
Allowing ranges, in addition to individual dates would be a nice feature. Feel free to make your voice heard. The Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
Hi Yisrael,
I hope you’re keeping well and thanks for you comment. I have created the arrays from the database and can get them to work using the manual code above but struggling to get the final outcome to set using the totalCount of the database.
I have been playing with the code below (with a manual totalCount) to try and get the expected outcome.
async function disableDates() {
let toArray = []
let ttlCnt
let data = await wixData.query('DisabledDates').find();
ttlCnt = data.totalCount;
let items = data.items;
for (let i = 0; i <= ttlCnt; i++) {
let firstStart = items[i].disableStartDate;
let firstFinish = items[i].disableFinishDate;
let formatted_firstStart = firstStart.getFullYear() + "," + (firstStart.getMonth() + 1) + "," + firstStart.getDate();
let formatted_firstFinish = firstFinish.getFullYear() + "," + (firstFinish.getMonth() + 1) + "," + firstFinish.getDate();
var arr = getDates(new Date(formatted_firstStart), new Date(formatted_firstFinish))
toArray.push(arr);
console.log(toArray)
$w('#datePicker3').disabledDates = arr;
}
}
The area that I’m struggling with it joining the arrays back together from the loop via this line
toArray.push(arr);
It feels like I’m pretty close but no cigar (or beer) just yet!
@stephenmccall You need to have two loops - one inside the other.
First, do your query and get the three disabled ranges. Loop through all three (or however many ranges you want) according to the number of ranges ( ttlCnt ). Inside of this loop, you will loop from start to finish of the current range in the outer loop.
Solved it!
Thanks for getting me to think outside of the box I was stuck in @yisrael-wix
I ended up using .forEach and then flattening the arrays to make a new singular array which I could use for the date picker.
async function disableDates() {
let toArray = [];
let data = await wixData.query('DisabledDates').find();
let item = data.items;
item.forEach((res) => {
let start = res.disableStartDate;
let finish = res.disableFinishDate;
let formatted_firstStart = start.getFullYear() + "," + (start.getMonth() + 1) + "," + start.getDate();
let formatted_firstFinish = finish.getFullYear() + "," + (finish.getMonth() + 1) + "," + finish.getDate();
let arr = getDates(new Date(formatted_firstStart), new Date(formatted_firstFinish))
toArray.push(arr);
})
let newArray = flatten(toArray)
$w('#datePicker3').disabledDates = newArray;
console.log(flatten(toArray));
}
function flatten(arr) {
return arr.reduce((acc, e) => acc.concat(e), []);
}
function getDates(startDate, endDate) {
const dates = []
const addDays = function (days) {
const date = new Date(this.valueOf())
date.setDate(date.getDate() + days)
return date
}
while (startDate <= endDate) {
dates.push(startDate)
startDate = addDays.call(startDate, 1)
}
return dates
}
I’ll have a beer to that! Cheers 