Hello:
I am trying to add a calendar that allows a customer to choose a range of dates. I found one that was developed by Andrew Petrus using JavaScript (https://medium.com/@ipeat/utilizing-date-range-picker-for-qualtrics-date-selection-ac49fb128765). It works fine except when I select the dates, the calendar/text box disappears on the computer preview, but not the Smartphone preview. Has anyone successfully added a date range calendar either using Andrew's method or another? Thanks in advance for any help/leads.
Paul
Solved
Date Range Picker (JavaScript)
Best answer by TomG
> @esegui said:
> coding is not my forte. In the look and feel advanced, I inserted this for jquery and flatpickr
> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script><script>var $j = jQuery.noConflict();</script>
> <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
>
> then in the JS oiption in the question
> flatpickr();
>
> obviously, I'm doing something worng
> Thanks for your help
> Emmanuel
>
>
>
Yes, you are. No need to load jQuery (Qualtrics already loads it), so your look & feel header is just:
```
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
```
Then in your question, you need to attach flatpickr to a text input:
```
jQuery("#"+this.questionId+" .InputText").flatpickr();
```
View original> coding is not my forte. In the look and feel advanced, I inserted this for jquery and flatpickr
> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script><script>var $j = jQuery.noConflict();</script>
> <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
>
> then in the JS oiption in the question
> flatpickr();
>
> obviously, I'm doing something worng
> Thanks for your help
> Emmanuel
>
>
>
Yes, you are. No need to load jQuery (Qualtrics already loads it), so your look & feel header is just:
```
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
```
Then in your question, you need to attach flatpickr to a text input:
```
jQuery("#"+this.questionId+" .InputText").flatpickr();
```
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.