I'm using the Qualtrics survey to ask about the event date so that they can pick it up on a calendar. I want it to be the one that actually displays a calendar as opposed to the others that have drop-downs. The dates available for selection should start from 14 days after the date they fill out the survey. The user should not be able to choose a date within 14 days from today. How should I do that?
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Pick the date at least 14 days from today
Add this code to the Custom JavaScript
Qualtrics.SurveyEngine.addOnload(function() {
var questionId = this.questionId;
var today = new Date();
var minDate = new Date(today.setDate(today.getDate() + 14)).toISOString().split('T'))0];
jQuery("#"+questionId+" .InputText").flatpickr({
minDate: minDate,
dateFormat: "Y-m-d",
disable:
function(date) {
return (date < new Date());
}
]
});
});
Hope this helps
HTML source is in Rich Content Editor → Source.
Happy to help
The next page shouldn’t get affected by the previous one. Did you add something in your footer?
Can you please provide a script I select a date from today onwards?
FYI I’m also encountering the same issue with the arrows following the next questions.
Here is a preview.
Anything we can add to close this Java script so it doesn’t continue on?
Thanks
For showing calendar from today
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
dateFormat: "Y-m-d"});
});
For showing after 14 days use
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
minDate: new Date().fp_incr(14) ,
dateFormat: "Y-m-d"});
});
Header would remain the same as mentioned in above replies.
Also, the arrows seem to be CSS issue do you mind sharing if you have included any other codes in survey.
Hope this helps!
HI
Thanks
We have followed the instructions above therefore we’ve used the stylesheet embedded in as html view as per
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Thanks
Use below code to start from today
Qualtrics.SurveyEngine.addOnload(function() { jQuery("#"+this.questionId+".InputText").flatpickr({
minDate: today,
dateFormat: "Y-m-d"}); });
Thank you
Can you please a;sp provide a code to start from today and restrict in picker up to 5 days from today only.
Qualtrics.SurveyEngine.addOnload(function() { jQuery("#"+this.questionId+".InputText").flatpickr({
minDate: today,
maxDate: new Date().fp_incr(5) ,
dateFormat: "Y-m-d"}); });
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.