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

J_3_NJ_3_N Des Moines, IACommunity Member Qubie ✭

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

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

  • TomGTomG Raleigh, NCCommunity Member 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_NJ_3_N Des Moines, IACommunity Member 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? 😳

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
  • J_3_NJ_3_N Des Moines, IACommunity Member 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"

        }

      ]

    }

  • TomGTomG Raleigh, NCCommunity Member 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>
    
Sign In to Comment