A datepicker is a widget that allows you to save dates using a calendar. In order to apply this code correctly, you must follow the next steps:
Add an open text question in the page you want to add the datepicker.
Then, you must change the question to not required in order to allow this script to make custom validations.
Open the Javascript editor, paste the code below this image and click the Save button.
function add_datepicker({question_code, min_date, max_date} = {}) {
input_date = document.querySelector("#p_" + question_code + "_1");
datepicker = `<input class="form-control" type="date" id="datepicker_`+ question_code + `" style="margin-top: 15px;">`;
input_date.style.display = "none";
input_date.outerHTML += datepicker;
datepicker = document.querySelector("#datepicker_" + question_code);
if(input_date.value != "") {
datepicker.value = input_date.value;
}
if(min_date !== undefined) {
datepicker.min = min_date;
}
if(max_date !== undefined) {
datepicker.max = max_date;
}
datepicker.addEventListener("change", (e) => {
input_date = document.querySelector("#p_" + question_code + "_1");
input_date.value = e.target.value;
})
document.querySelector("#p_next").addEventListener("click", (e) => {
if(min_date !== undefined && new Date(input_date.value) < new Date(min_date)) {
console.log(input_date, min_date);
e.preventDefault();
target_question = datepicker;
feedback = document.querySelector("#feedback_" + question_code);
if(feedback != null){
feedback.remove();
target_question.classList.add("is-invalid")
}
target_question.insertAdjacentHTML(
"beforebegin",
`<span class="d-block custom-error pb-1 text-center" id="feedback_` + question_code + `">
<span class="form-error-message text-danger">You cannot select a date earlier than `+min_date+`
</span></span>`
);
target_question.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
} else if(max_date !== undefined && new Date(input_date.value) > new Date(max_date)) {
console.log(input_date, max_date);
e.preventDefault();
target_question = datepicker;
feedback = document.querySelector("#feedback_" + question_code);
if(feedback != null){
feedback.remove();
target_question.classList.add("is-invalid")
}
target_question.insertAdjacentHTML(
"beforebegin",
`<span class="d-block custom-error pb-1 text-center" id="feedback_` + question_code + `">
<span class="form-error-message text-danger">You cannot select a date later than `+max_date+`
</span></span>`
);
target_question.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
} else if(input_date.value == "") {
e.preventDefault();
target_question = datepicker;
feedback = document.querySelector("#feedback_" + question_code);
if(feedback != null){
feedback.remove();
target_question.classList.add("is-invalid")
}
target_question.insertAdjacentHTML(
"beforebegin",
`<span class="d-block custom-error pb-1 text-center" id="feedback_` + question_code + `">
<span class="form-error-message text-danger">Please, choose a valid date
</span></span>`
);
target_question.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}
});
}
/* Change this part of the code with your custom parameters */
add_datepicker({
question_code : "Q1",
min_date : "yyyy-mm-dd",
max_date : "yyyy-mm-dd"
});
How to use it
The open text question will be hidden and a datepicker will be placed. All the dates that you select in the datepicker will be saved into the hidden open text question to allow SynoSurvey to save the data for the reports.
You should edit this part to your needs. Check the table below to see a description of each parameter.
add_datepicker({
question_code : "Q1",
min_date : "yyyy-mm-dd",
max_date : "yyyy-mm-dd"
});
Variables
| Variable | Example |
|
question_code The question code of your open text |
add_datepicker({
|
|
min_date Optional argument for setting the selectable start date. |
add_datepicker({
|
|
max_date Optional argument for setting the selectable end date. |
add_datepicker({
|
To limit the min_date or max_date to the current date you should use:
min_date = new Date().toISOString().split('T')[0]
// or
max_date = new Date().toISOString().split('T')[0]
Examples
Default calendar, allows all dates
add_datepicker({
question_code : "Q1"
});
Allow all dates in the past up to this date
add_datepicker({
question_code : "Q1",
max_date : new Date().toISOString().split('T')[0],
});
Allow all dates as of today
add_datepicker({
question_code : "Q1",
min_date : new Date().toISOString().split('T')[0]
});
Constrain to custom dates
add_datepicker({
question_code : "Q1",
min_date : "2000-01-01",
max_date : "2022-12-31"
});
Conclusion
Once everything is set up. You should see a datepicker like this. All the validation is handled by the code: