Flatpickr - Only enabled dates through end of current year | XM Community
Skip to main content

I’ve got a form where I’ve implemented Flatpickr, but need it to only display the current year through the end of the year. I know I could do minDate and maxDate: “12/31/24” but I want it to be dynamic so I don’t have to remember to go in and change the year manually. 

I tried to just enable a date range, but that didn’t work as expected. It only displayed the calendar through the end of the year, but none of the dates were actually enabled.

Qualtrics.SurveyEngine.addOnload(function()
{
	jQuery("#question-"+this.questionId+" .text-input").flatpickr({
    dateFormat: "m/d/y",
	altInput: true,
    altFormat: "F j, Y",
	defaultDate:"today",
	maxDate: "12/31/24",
		/*enable: >
        {
            from: "today",
            to: "12/31/24"
        }
    ],*/
	onChange: function(selectedDates, dateStr, instance) {
	Qualtrics.SurveyEngine.setJSEmbeddedData("date1",dateStr);
	}	
});
});

Thoughts? Anyone else have a similar need and run into issues?

Hi @courtrc ,

 

I played around with the JS and came up with the below:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
		const enddate=new Date();
		enddate.setMonth(11);
		enddate.setDate(31);

	jQuery("#"+this.questionId+" .InputText").flatpickr({
	/*flatpickr options go here */ 
	dateFormat: "m/d/y",
    altInput: true,
    altFormat: "F j, Y",
	defaultDate:"today",
	maxDate: enddate,
														})

});

What it does is

1) Set current date to a variable and change the date and month to end of the year.

2) Takes the variable’s value as the maxDate.

 

However, there is an issue if the “today” date is 31 Dec 2024 as the maxDate remains as 31 Dec 2024 and does not allow the following year 2025 to be chosen.

 

Note: I am not a JS programmer. Hence, what I did above may be incorrect.

@Chee Heng_SZ this is great. Thanks for sharing your ideas! I’ll keep exploring this.

Leave a Reply


Terms & Conditions