Is there a way for me to set a date range in a question where participants can only choose a date within a certain time frame? The range would need to be between 2 and 30 days from the date the survey is being completed. If this could be done using a calendar, that would be great.
Page 1 / 1
There is the possibility to set a time stamp (day/month/year) as embedded data in the survey flow, e.g.
Current day: CD=${date://CurrentDate/d}
Current month: CM=${date://CurrentDate/m}
Current year: ${date://CurrentDate/Y}
The time frame between 2 and 30 days can then be calculated and displayed, or used for validation.
Current day: CD=${date://CurrentDate/d}
Current month: CM=${date://CurrentDate/m}
Current year: ${date://CurrentDate/Y}
The time frame between 2 and 30 days can then be calculated and displayed, or used for validation.
Thanks Pat, but why would you embed this in the survey flow and not the actual question?
@jeuneviette,
You can use flatpickr with minDate and maxDate options:
https://flatpickr.js.org/examples/#mindate-and-maxdate
You can use flatpickr with minDate and maxDate options:
https://flatpickr.js.org/examples/#mindate-and-maxdate
@TomG Thanks; this seems like it could work, but I have 3 follow-up questions. (1) Is flatpickr already built into Qualtrics? (I've never heard of it) (2) How would I write the code for 2 days from today's date for the minimum date and (3) where would I write this code. Would it be added to the custom validation option under "Matches Regex"?
> @jeuneviette said:
> (1) Is flatpickr already built into Qualtrics? (I've never heard of it)
No, it is a third party JS library. You can load it from JSDelivr. Do a search on the Qualtrics Community and you'll find some examples.
> (2) How would I write the code for 2 days from today's date for the minimum date
Just like in the example I linked to:
```
minDate: new Date().fp_incr(2)
```
> (3) where would I write this code. Would it be added to the custom validation option under "Matches Regex"?
Click on the cog to the left of the question and select "Add JavaScript"
> (1) Is flatpickr already built into Qualtrics? (I've never heard of it)
No, it is a third party JS library. You can load it from JSDelivr. Do a search on the Qualtrics Community and you'll find some examples.
> (2) How would I write the code for 2 days from today's date for the minimum date
Just like in the example I linked to:
```
minDate: new Date().fp_incr(2)
```
> (3) where would I write this code. Would it be added to the custom validation option under "Matches Regex"?
Click on the cog to the left of the question and select "Add JavaScript"
@TomG Thank you so much! This is very helpful.
@TomG I'm trying a version of this but wanting datetime pickr, mindate for 5 business days in the future. Here is the code I have so far:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" .InputText").flatpickr();
})
{
enableTime: true
dateFormat: "Y-m-d H:i"
}
{
minDate: new Date().fp_incr(7)
}
This doesn't seem to do anything and I think it's because I've missed something in the code. Can you provide some support?
Thank you!
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" .InputText").flatpickr();
})
{
enableTime: true
dateFormat: "Y-m-d H:i"
}
{
minDate: new Date().fp_incr(7)
}
This doesn't seem to do anything and I think it's because I've missed something in the code. Can you provide some support?
Thank you!
You have the right idea, but it is syntactically incorrect. Try:
```
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionId+" .InputText").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
minDate: new Date().fp_incr(7)
});
});
```
```
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionId+" .InputText").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
minDate: new Date().fp_incr(7)
});
});
```
@TomG Thank you! Worked like a charm.
Hi @TomG (or anyone really) but I'm still struggling trying to understand how to input the range needed. I am looking for due date of people's pregnancy which occurs in the future. For my date question, I want to make sure that individuals insert a date that is in the future from the day they participate in the survey (e.g. if today's date is 12.31.2019, they must input a date that is after 12.31.2019). From the flatpickr examples, they require a base minimum date which technically will change. Any insight would be helpful - thank you!
> @Anushka said:
> Hi @TomG (or anyone really) but I'm still struggling trying to understand how to input the range needed. I am looking for due date of people's pregnancy which occurs in the future. For my date question, I want to make sure that individuals insert a date that is in the future from the day they participate in the survey (e.g. if today's date is 12.31.2019, they must input a date that is after 12.31.2019). From the flatpickr examples, they require a base minimum date which technically will change. Any insight would be helpful - thank you!
Just like the example above:
```
mindate: new Date().fp_incr(1)
```
> Hi @TomG (or anyone really) but I'm still struggling trying to understand how to input the range needed. I am looking for due date of people's pregnancy which occurs in the future. For my date question, I want to make sure that individuals insert a date that is in the future from the day they participate in the survey (e.g. if today's date is 12.31.2019, they must input a date that is after 12.31.2019). From the flatpickr examples, they require a base minimum date which technically will change. Any insight would be helpful - thank you!
Just like the example above:
```
mindate: new Date().fp_incr(1)
```
@TomG Thanks Tom - I'm still getting confused and I've tried a few iterations - would appreciate any guidance!
Question edit to ensure fp is loaded:
When is your baby's due date? Please enter the date as MM-DD-YYYY:
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
JS language:
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionID+" .InputText").flatpickr({
enableTime: true,
dateFormat: "M-D-Y",
minDate: new Date().fp_incr(1)
});
});
With variable name for question:
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.duedate_d1+" .InputText").flatpickr({
enableTime: true,
dateFormat: "MM-DD-YYYY",
minDate: new Date().fp_incr(1)
});
});
With variable name and question number
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.duedate_d1/QID21/QID21+" .InputText").flatpickr({
enableTime: true,
dateFormat: "MM-DD-YYYY",
minDate: new Date().fp_incr(1)
});
});
Thank you!
Question edit to ensure fp is loaded:
When is your baby's due date? Please enter the date as MM-DD-YYYY:
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
JS language:
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionID+" .InputText").flatpickr({
enableTime: true,
dateFormat: "M-D-Y",
minDate: new Date().fp_incr(1)
});
});
With variable name for question:
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.duedate_d1+" .InputText").flatpickr({
enableTime: true,
dateFormat: "MM-DD-YYYY",
minDate: new Date().fp_incr(1)
});
});
With variable name and question number
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.duedate_d1/QID21/QID21+" .InputText").flatpickr({
enableTime: true,
dateFormat: "MM-DD-YYYY",
minDate: new Date().fp_incr(1)
});
});
Thank you!
> @Anushka said:
> @TomG Thanks Tom - I'm still getting confused and I've tried a few iterations - would appreciate any guidance!
>
> Question edit to ensure fp is loaded:
> When is your baby's due date? Please enter the date as MM-DD-YYYY:
> <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
>
> JS language:
> Qualtrics.SurveyEngine.addOnReady(function() {
> jQuery("#"+this.questionID+" .InputText").flatpickr({
> enableTime: true,
> dateFormat: "M-D-Y",
> minDate: new Date().fp_incr(1)
> });
> });
>
> With variable name for question:
> Qualtrics.SurveyEngine.addOnReady(function() {
> jQuery("#"+this.duedate_d1+" .InputText").flatpickr({
> enableTime: true,
> dateFormat: "MM-DD-YYYY",
> minDate: new Date().fp_incr(1)
> });
> });
>
> With variable name and question number
> Qualtrics.SurveyEngine.addOnReady(function() {
> jQuery("#"+this.duedate_d1/QID21/QID21+" .InputText").flatpickr({
> enableTime: true,
> dateFormat: "MM-DD-YYYY",
> minDate: new Date().fp_incr(1)
> });
> });
>
> Thank you!
Two things...
First, your flatpickr stylesheet link should be in the survey header along with the flatpickr JS (if you don't already have it).
Second, your jQuery selector is wrong. Your first example is the closest, but JS variables are case sensitive. It should be:
```
jQuery("#"+this.questionId+" .InputText")
```
> @TomG Thanks Tom - I'm still getting confused and I've tried a few iterations - would appreciate any guidance!
>
> Question edit to ensure fp is loaded:
> When is your baby's due date? Please enter the date as MM-DD-YYYY:
> <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
>
> JS language:
> Qualtrics.SurveyEngine.addOnReady(function() {
> jQuery("#"+this.questionID+" .InputText").flatpickr({
> enableTime: true,
> dateFormat: "M-D-Y",
> minDate: new Date().fp_incr(1)
> });
> });
>
> With variable name for question:
> Qualtrics.SurveyEngine.addOnReady(function() {
> jQuery("#"+this.duedate_d1+" .InputText").flatpickr({
> enableTime: true,
> dateFormat: "MM-DD-YYYY",
> minDate: new Date().fp_incr(1)
> });
> });
>
> With variable name and question number
> Qualtrics.SurveyEngine.addOnReady(function() {
> jQuery("#"+this.duedate_d1/QID21/QID21+" .InputText").flatpickr({
> enableTime: true,
> dateFormat: "MM-DD-YYYY",
> minDate: new Date().fp_incr(1)
> });
> });
>
> Thank you!
Two things...
First, your flatpickr stylesheet link should be in the survey header along with the flatpickr JS (if you don't already have it).
Second, your jQuery selector is wrong. Your first example is the closest, but JS variables are case sensitive. It should be:
```
jQuery("#"+this.questionId+" .InputText")
```
Hi @TomG - thank you so much for your help! I'm still unable to get it to work - I'm wondering if my source code is incorrect?
!
!
!
!
> @Anushka said:
> Hi @TomG - thank you so much for your help! I'm still unable to get it to work - I'm wondering if my source code is incorrect?
The stylesheet link should be in the survey header before the JavaScript, not the question text.
> Hi @TomG - thank you so much for your help! I'm still unable to get it to work - I'm wondering if my source code is incorrect?
The stylesheet link should be in the survey header before the JavaScript, not the question text.
Hi @TomG - is this where it should go (screenshot below)? I also tried to add it to the JS script for the question and got an error message (screenshot below). Thank you so much for your help!
!
!
!
!
> @Anushka said:
> Hi @TomG - is this where it should go (screenshot below)? I also tried to add it to the JS script for the question and got an error message (screenshot below). Thank you so much for your help!
Update the survey header under Look & Feel/General. Use source (<>) mode. This is the same place you should have placed the Flatpickr script link.
> Hi @TomG - is this where it should go (screenshot below)? I also tried to add it to the JS script for the question and got an error message (screenshot below). Thank you so much for your help!
Update the survey header under Look & Feel/General. Use source (<>) mode. This is the same place you should have placed the Flatpickr script link.
@TomG Thank you so much - it works perfectly now!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.