Jump to content
  • 0

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


Septimana

Question

3 answers to this question

Recommended Posts

  • 0

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.

sQOD5YV.png

 

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

2kgMKZO.png

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:
PEhYAOX.png

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.

FGIAIl1.png

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.
go6viDv.png

 

DLv7U1W.png

The Table example with the records inserted by a Trigger:
KNQip0G.png

Link to comment
Share on other sites

  • 0

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:
FluDILv.png

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

ONtQIRE.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...