Week picker using date component

💬 App Building
1

Hi I am trying to build a week picker for my app.

image
image522×427 17 KB

I want only Mondays to be enabled in this date picker. Can you pls guide how do I implement this?

2

Hey Tajir,
I don't believe that the datePicker component allows for that level of customization, but you can accomplish something similar by using separate month, year, and week select components.

Using the standard month and year select components and then a select component powered by this transformer

const mondays = [ ];
const date = new Date({{year1.value}}, {{month1.value}} - 1, 1);

// Find the first Monday
while (date.getDay() !== 1) {
date.setDate(date.getDate() + 1);
}

let weekNumber = 1;

while (date.getMonth() === {{month1.value}} - 1) {
mondays.push({
week: weekNumber,
value: date.toISOString().split('T')[0]
});
weekNumber++;
date.setDate(date.getDate() + 7);
}

return mondays;

You get something that looks like this.

image
image1098×487 18.2 KB

Here's a JSON export of that example if you want to dig into it a bit more.
Week Picker.json (12.4 KB)

3

thanks!