Date Range Picker (JavaScript) | XM Community
Solved

Date Range Picker (JavaScript)

  • 11 May 2018
  • 9 replies
  • 994 views

Userlevel 1
Badge +4
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
icon

Best answer by TomG 12 June 2018, 17:48

View original

9 replies

Userlevel 7
Badge +27
Check out flatpickr. It does ranges, is easy to integrate with Qualtrics, and much lighter.
Userlevel 1
Badge +4
Thanks, Tom! I will take a look.
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
Userlevel 7
Badge +27
> @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();
```
thanks a lot
I have a simple but powerful improvement to the calendar code that's described here. Basically, qualtrics now provides a calendar picker example question that you can import via Qualtrics Library > Survey Questions > Demographics > Calendar & Date > "Enter a date:". See video: https://www.youtube.com/watch?v=ljWkJBeXoDw.

This however provides a very bulky calendar that takes up alot of room. What i've done is modified the code so that the calendar is hidden and only toggles when you click on the input field and after selecting the date it will again toggle hide.

Simply add the following code to the html view of your input text question type.
```
Enter date here (MM-DD-YYYY):<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script>
```
Then in add the following Javascript to your question within Qualtrics.SurveyEngine.addOnload(function(){
});

```
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

let qid = this.questionId;
let qContainer = this.questionContainer;

//===Creates Calendar===
let calOuter = QBuilder('div');
$(calOuter).setStyle({clear:'both'});
let calid = qid+'_cal';

let calender = QBuilder('div',{className:'yui-skin-sam'},[QBuilder('div', {id:calid}), calOuter]);
qContainer = $(qContainer).down('.QuestionText');
qContainer.appendChild(calender);

let yahWidget = new YAHOO.widget.Calendar(calid);
yahWidget.render();
calOuter.style.display="none";
calender.style.display="none";

//===Creates Input Field===
let inputField = $('QR~' + qid);
$(inputField).setStyle({marginTop: '20px',width: '150px'});
let inputContainer =$(inputField).up();
let inputDiv = QBuilder('div');
$(inputDiv).setStyle({clear:'both'});
inputContainer.insert(inputDiv,{position:'before'});

//===Toggles Show Calendar===
inputField.addEventListener("click", function() {
calender.style.display="block";
});

//===Select Date and Toggles Hide Calendar===
yahWidget.selectEvent.subscribe(function(e,dates){
let date = dates[0][0];
if (date[1] < 10) {date[1] = '0' + date[1];};
if (date[2] < 10) {date[2] = '0' + date[2];};
inputField.value = date[1] +'-'+date[2]+'-'+date[0];
calender.style.display="none";
});

});

```
Userlevel 1
Badge +2

This works great, but do you know how I can limit the choice to allow the user to only pick dates two weeks in advance and no weekends?

Hi, how can i set a date range in the calendar? For example, I want the calendar to show only the past 3 months till the current date?

Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/41411#Comment_41411Flatpickr documentation is here.

Leave a Reply