Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Need help with date on calendar - using Qualtrics canned question with Javascript

J_3_N
J_3_N Des Moines, IA Qubie ✭

Hi. I am using the pre built question inside the Qualtrics library for the calendar pop out. It is working great - except for one issue.

I want to be able to limit the days a person can pick. I don't want them to be able to pick more than a month behind them (in the past from current day date).

And then on the Leave End Date calendar I don't want them to be able to pick more than 18 months in the future.

Below is my exact script for the first calendar.

I don't want one calendar with a range. I just want to establish a start date and and end date.

I also don't want to switch over to some other JS unless you spell it out for me on how to do it. :-)

Thanks in advance. Stay well.


Leave Begin 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[1] +'-'+date[2]+'-'+date[0];

 })

});

</script>

Tagged:

Answers

  • TomG
    TomG Raleigh, NC Wizard ✭✭✭✭✭

    The calendar used by the Qualtrics library question isn't very good. I recommend using flatpickr instead. It is better in every way. There are a number of Community posts about it.

    If you find you need to do date arithmetic, I recommend using moment.js for that.

  • J_3_N
    J_3_N Des Moines, IA Qubie ✭

    I was pretty sure that's what you were going to say as I had rest many of your posts before I asked.

    I am not against flatpickr but I don't understand it. I went to the website. I tried to follow but I am not good at JS at all. I can really only do some basics.

    Could you help get me started? 😳

  • TomG
    TomG Raleigh, NC Wizard ✭✭✭✭✭
  • J_3_N
    J_3_N Des Moines, IA Qubie ✭

    OK. I really appreciate it. I don't even feel like I am close.

    Here is where I am at.

    This is in the Header:


    That seems fine. Then in my actual question which is a text entry I have:

    Which of course gives me an error. I have to be missing a space or a character somewhere.

    Qualtrics.SurveyEngine.addOnReady(function(){

    /jQuery("#"+this.questionId+" .InputText").flatpickr({

    enableTime:true,

    dateFormat: "mm-dd-YYYY",

      disable: [

        {

          from: "01-01-1901",

          to: "08-14-2025"

        },

        {

          from: "07-02-2021",

          to: "07-01-2025"

        }

      ]

    }

  • TomG
    TomG Raleigh, NC Wizard ✭✭✭✭✭

    That isn't the header. That is Custom CSS, but you've put JavaScript instead of CSS there. In the header should be the html:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.js"></script>