Best answer by AlexB
View original
Calendar/Date Picker
Userlevel 4
I'd like a respondent to pick their birthday from a calendar/date picker and then calculate and store their age with the response. Is this possible?
Page 2 / 2
Userlevel 5
+7
@rachel_stoddart , There is a really good thread here about the calendar/date picker in the Qualtrics library.
https://qualtrics.com/community/discussion/101/calendar-date-picker
https://qualtrics.com/community/discussion/101/calendar-date-picker
Userlevel 7
+20
Yes you can... Under validation type please select "content validation" and then under "content type" please select "date". There is a drop down which allows you to select the date format.
Below is the snapshot.
!
Below is the snapshot.
!
+1
I am creating a survey, date of birth is one of the questions. Can I choose this to be answered as date only? Or can my only choice be text entry?
+1
You can calculate and save age using the script in this post which I found very informative : https://medium.com/@mc_bloomfield/javascript-and-qualtrics-getting-started-34f113cbeaaa
Also, I utilized this picker in my survey and really like it: amsul.ca/pickadate.js/date/
However, one thing I did differently was to user the Modernizr library to detect if the device was a mobile device and if so trigger the native date pickers on those devices. It works pretty slick.
Also, I utilized this picker in my survey and really like it: amsul.ca/pickadate.js/date/
However, one thing I did differently was to user the Modernizr library to detect if the device was a mobile device and if so trigger the native date pickers on those devices. It works pretty slick.
Userlevel 7
+27
Ok, the yahoo date picker Qualtrics uses looks bad and is ancient. I think a better choice is to integrate flatpickr. It has a built-in option that will let you show the user m/d/y but will store the date as y-m-d. It has lots of other options too and is easy to configure.
I've used it with Qualtrics and it works great.
I've used it with Qualtrics and it works great.
+1
Awsome! Thanks
Userlevel 7
+7
@Kerry
Update the html view of that question text to the following:
Enter a date:<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>
<script>
Qualtrics.SurveyEngine.addOnload(function ()
{
var qid = this.questionId;
var calid = qid + '_cal';
var y = QBuilder('div');
$(y).setStyle({clear:'both'});
var d = QBuilder('div',{className:'yui-skin-sam'},[
QBuilder('div', {id:calid}),
y
]);
var c = this.questionContainer;
c = $(c).down('.QuestionText');
c.appendChild(d);
var cal1 = new YAHOO.widget.Calendar(calid);
cal1.render();
var input = $('QR~' + qid);
$(input).setStyle({marginTop: '20px',width: '150px'});
var p =$(input).up();
var x = QBuilder('div');
$(x).setStyle({clear:'both'});
p.insert(x,{position:'before'});
cal1.selectEvent.subscribe(function(e,dates){
var date = dates[0][0];
if (date[1] < 10)
date[1] = '0' + date[1];
if (date[2] < 10)
date[2] = '0' + date[2];
input.value = date[0] +'-'+date[1]+'-'+date[2];
})
});
</script>
Update the html view of that question text to the following:
Enter a date:<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>
<script>
Qualtrics.SurveyEngine.addOnload(function ()
{
var qid = this.questionId;
var calid = qid + '_cal';
var y = QBuilder('div');
$(y).setStyle({clear:'both'});
var d = QBuilder('div',{className:'yui-skin-sam'},[
QBuilder('div', {id:calid}),
y
]);
var c = this.questionContainer;
c = $(c).down('.QuestionText');
c.appendChild(d);
var cal1 = new YAHOO.widget.Calendar(calid);
cal1.render();
var input = $('QR~' + qid);
$(input).setStyle({marginTop: '20px',width: '150px'});
var p =$(input).up();
var x = QBuilder('div');
$(x).setStyle({clear:'both'});
p.insert(x,{position:'before'});
cal1.selectEvent.subscribe(function(e,dates){
var date = dates[0][0];
if (date[1] < 10)
date[1] = '0' + date[1];
if (date[2] < 10)
date[2] = '0' + date[2];
input.value = date[0] +'-'+date[1]+'-'+date[2];
})
});
</script>
+1
This is a really nice feature...but how can I change the date format from the US only mm-dd-yyyy to the unambiguous international format: yyyy-mm-dd?
Userlevel 4
> @AnthonyR said:
> To use a date to calculate age, you will likely need to feed it through a webservice and store age as an embedded data variable.
That makes sense. Thanks!
> To use a date to calculate age, you will likely need to feed it through a webservice and store age as an embedded data variable.
That makes sense. Thanks!
Userlevel 3
+2
@Goldie I don't know how to do that! But, I'm guessing you might have some insight on that 
Userlevel 7
+7
To use a date to calculate age, you will likely need to feed it through a webservice and store age as an embedded data variable.
Userlevel 4
@AlexB Sweet! That got me the right question itself. Do you know if I can use that question to calculate and store a person's age as well?
Userlevel 3
+2
Sure is! Easiest way is to change question type, using Qualtrics library at the bottom. Choose Qualtrics Library - Survey Library - Demographics - Calendar & Date Questions. Choose the second question in the list: "Enter a date:", and import. Even though it looks like a text entry question from the design screen, there is code in there so when you preview and take the survey, it shows up as a calendar!
Page 2 / 2
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.