📆Date picker

Add a date picker using an Open Text question

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.

Fig 1. Adding an open text to save the dates

Then, you must change the question to not required in order to allow this script to make custom validations.

Fig 2. Disabling mandatory question

Open the Javascript editor, paste the code below this image and click the Save button.

Fig 3. Copy and paste the code below into the Javascript editor

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	Value	Example
question_code	The question code of your open text	add_datepicker({ question_code : "Q1", min_date : "yyyy-mm-dd", max_date : "yyyy-mm-dd" });
min_date	Optional argument for setting the selectable start date. Format: yyyy-mm-dd	add_datepicker({ question_code : "Q1", min_date : "yyyy-mm-dd", max_date : "yyyy-mm-dd" });
max_date	Optional argument for setting the selectable end date. Format: yyyy-mm-dd	add_datepicker({ question_code : "Q1", min_date : "yyyy-mm-dd", max_date : "yyyy-mm-dd" });

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]
});

Contrain to custom dates

add_datepicker({
    question_code : "Q1",
    min_date : "2000-01-01",
    max_date : "2022-12-31"
});

Conclusion

Once everything is setting up. You should see a datepicker like this. All the validation is handle by the code:

Fig 4. See the datepicker in your survey.