Select multiple dates (the list of dates) in one field

[Septimana]

Hello, 

Is it possible to select multiple dates from the calendar popup? So, the user should select the list of dates.

Thanks!

 

 

[CoopperBackpack]

Hello @Septimana,

First of all, if you have the field in the Table with the Date/Time data type it can only store a single date due to the data type peculiarities.

The workaround can be the following: using the Text(255) field and custom calendar instead of the default one.

This solution is for the Submission form and the US date format MM/dd/yyyy.

 

1) Add a Text(255) field to the Table to store the list of dates. Please note that this field can hold ~ 25 dates (since the maximum number of characters is 255).  In this example the field name is 'date_list'.

2) In the DataPage Header disable the HTML editor on the Advance tab and paste this code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<style>
.flatpickr-calendar {
    font-family: system-ui !important;
}
</style>

These are links to the CDN to add the custom calendar. The styles are optional.

 

2) Do not use the Calendar popup for the date field. The Calendar popup should be disabled.

3) In the Footer section disable the HTML editor on the Advance tab and paste this code:

<script>
document.addEventListener('DataPageReady', customCalendarHandler);

function customCalendarHandler(){

const dateField = document.querySelector('#InsertRecorddate_list'); //replace the date_list with your field name
dateField.flatpickr({
    dateFormat: "m/d/Y",
    mode: "multiple"
});
document.removeEventListener('DataPageReady', customCalendarHandler);
}
</script>

The DataPage example:

4) Usually the dates are needed to be used in a calendar, etc. So they should be stored in a Date/Time field.

The list of dates can be split into multiple records by a Trigger. The solution from this forum post can be used:

Let`s say the dates are submitted to the 'Date_List' Table into the 'date_list' field.

Here is the Trigger example to split the dates list and insert them into a new Table named 'Parsed_dates' in this example.

As you can see, the field data type in a new Table is Date/Time.

 

The Table example with the records inserted by a Trigger:

[CoopperBackpack]

If you prefer to display dates in European format (dd/MM/yyyy), the solution should be slightly modified.

1) In the code placed in the Footer section, the date format should be changed:
 

<script>
document.addEventListener('DataPageReady', customCalendarHandler);

function customCalendarHandler(){

const dateField = document.querySelector('#InsertRecorddate_list'); //replace the date_list with your field name
dateField.flatpickr({
    dateFormat: "d/m/Y",
    mode: "multiple"
});
document.removeEventListener('DataPageReady', customCalendarHandler);
}
</script>

Selected dates will have the following view:

2) In the Trigger one more variable is needed to convert the date to the US format to be stored in the Date/Time field

[cheonsa]

Hi!

Just to add, if you would like to select a date range, you may try the solution provided in the howto article: https://howto.caspio.com/tech-tips-and-articles/render-date-range-in-calendar-datapage/