Calendar/Date Picker

> @Abmetelus said:
> @Rod_Pestell I am running into that same issue. Can you provide screen shots on how you solved the issue? I tried following your instructions, but it's still not working. I assume I am doing something wrong. Thanks!

Qualtrics recently made a change. You can no longer include a script tag in question text.

@Rod_Pestell Thank you! That fixed my issue.

Hi All,

Thought I'd add a little extra note. I wanted to restrict the date so that the responder couldn't choose a future date. This was done by amending the JavaScript to the following:

Note the var today section. I needed to reverse the format of the date.

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 today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + '/' + dd + '/' + yyyy;


var c = this.questionContainer;
c = $(c).down('.QuestionText');
c.appendChild(d);
var cal1 = new YAHOO.widget.Calendar(calid, {maxdate: today});


cal1.render();
/*$('.yui-skin-sam .yui-calendar td.calcell.oom').setStyle({color:'#efefef!important'});
$('.yui-skin-sam .yui-calendar td.calcell.previous').setStyle({color:'#efefef!important'});*/
/* these two lines above was an attempt to control the skin css of the out of month and disabled dates (ie future dates) However Qualtrics doesn't like the term !important so you have to do it by the usual look and feel header source code route*/

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];

/* var dt = [ /this code was thought to be needed to reverse the date format but seems to be ok now. It's not quite working as it's not updating the field through the input.value method so something isn't quite right in the syntax
date.getFullYear(),
('0' + (date.getMonth() + 1)).slice(-2),
('0' + date.getDate()).slice(-2)
].join('-');

input.value = dt; */

})

});

----------
then in the look and feel header source section add this:
----------

<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/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>

<style type="text/css">.yui-skin-sam .yui-calendar td.calcell.oom {
background-color:#cccccc;
color:#ffffff!important;
cursor:default;
}

.yui-skin-sam .yui-calendar td.calcell.previous {
color:#ffffff!important;
}
</style>


Some info about how to control the date picker can be found here:

https://www.cse.iitb.ac.in/~cs387/yui/examples/calendar/calskin.html

Hi voglan ,

I'm not sure but it looks like it's using 2 digit year vs a 4 digit year meaning the date format is not working as expected. Also, this post talks about the yahoo sourced calendar so I'm not sure why you posted here. I think there are other post around which covers flatpickr in more detail? eg. https://community.qualtrics.com/XMcommunity/discussion/10210/month-picker-help-changing-html-elements-through-jquery
https://community.qualtrics.com/XMcommunity/discussion/8850/embedding-flatpickr-into-the-survey

Hope that helps

Thanks

Rod Pestell

Hi Topazfae
If I recall correctly, there was a preview I attended which demonstrated an extension or new addin that would let you control invites in google calendar or outlook. I can't remember the details in full but if you reach out to the Qualtrics team they should be able to confirm whether this would help you. Alternatively the flatpickr module I think (?) has the capability to block out specific dates or ranges at least (eg. I've used it to block past or future dates in the past). You do this in the javaScript code.
Hope that helps
Thanks
Rod Pestell

Hello. I am using one of the 3 calendar question from the Qualtric library (Demographics-Calendar and Date Questions-Enter a date). I want to make sure that the choosen date is not beyond the current date. How can I do this?  Can I use a condition like Display Logic or do I need to write code? Thanks, Al