Pick multiple dates in datepicker

Ask the community
,
1

I want to be able to have a form where the user can pick multiple dates for the datepicker (for example 1,2,5,7,13 of june + 23,27 of july) and insert those into a content collection. I then want to be able to do a date search later where the correct events shows up. Can anyone help me :slight_smile:

2

You should create selectedDates field in your collection. Make the field type: Array
On your page put 2 elements:

  1. Date picker (do not connect it to the dataset)

  2. Repeater that represents the selected date. In the repeater put a text elements (to show the date. And ‘Remove’ button to remove a date.
    Do some code like:

let selectedDates = [];
$w.oReady(() => {
    $w('#datset1').onReady(() => {
        $w('#Datepicker').onChange(event => {
            selectedDates.push(event.target.value.toJSON()); 
            $w('#datset1').setFieldValue("selectedDates", selectedDates);
            })
        $w('#removeDateButton').onClick(event => {
            const item = $w('#repeater1').data.find(e => e._id === event.context.itemId);
            selectedDates = selectedDates.filter(e => e !== item.val);
            $w('#datset1').setFieldValue("selectedDates", selectedDates);
            showSelectedDates();
        })
    })
})
function showSelectedDates(){
  const data = selectedDates.map((e,i) => ({_id: i.toString(), val: e}));
   $w('#repeater1').data = data;
   $w('#repeater1').forEachItem(($i,iData) => {
    $i('#dataeText').text = new Date(iData.val).toLocaleDateString());
    })
 }