How can I limit the dates that can be selected in Date Picker? | XM Community
Solved

How can I limit the dates that can be selected in Date Picker?

  • 14 February 2019
  • 6 replies
  • 512 views
B
I need to limit the dates on the Date Picker to show 4/1/19 to 6/30/19, but am having trouble on locating where to edit this. I found a string of code (shown below) that can limit the dates, but am not sure where to place it within the code. Any help would be greatly appreciated!

var cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ pagedate: "1/5/2017",
mindate: "1/5/2017",
maxdate: "1/15/2017" }
);
icon

Best answer by TomG 19 February 2019, 20:53

View original

6 replies

YASH1T
Rank
Badge +6
@bchin This link will guide you where to put the code : https://ithelp.brown.edu/kb/articles/add-a-date-picker-to-a-qualtrics-question
B
@YASH1T Hmm, I know where to place the basic code that gives me the Date Picker, but I'm wondering where to place the string of code I stated above that allows me to limit the dates shown in the Date Picker widget.
TomG
Rank
Userlevel 7
Badge +27
@bchin,

This isn't a direct answer to your question, but the Yahoo date picker is old and clunky. I recommend you use flatpickr instead. It is quite easy to set min and max dates. Search the Community for flatpickr to find more information about implementing in Qualtrics.
B
@TomG - thanks for the recommendation! I have no experience with coding whatsoever and can't seem to figure out how to extract the code from jsdelivr. If you could assist - I'd appreciate it!
TomG
Rank
Userlevel 7
Badge +27
> @bchin said:
> @TomG - thanks for the recommendation! I have no experience with coding whatsoever and can't seem to figure out how to extract the code from jsdelivr. If you could assist - I'd appreciate it!

Add this to your Look & Feel Header in SOURCE mode (click the <> box):
```
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script>
```
In your question JS, attached flatpickr to your text input field, for example:
```
jQuery("#"+this.questionId+" input[type=text]").flatpickr({minDate:"2019-01",maxDate:"today"});
```
P
Badge +3

is there a way to alter this code so that the set date range is dynamic - e.g. always presents dates between the current date and 3 months previous to that?

Leave a Reply


Terms & Conditions