Setting minDate with embedded data in Flatpickr

skochharskochhar New York, NYCommunity Member Qubie ✭

Setting minDate with embedded data in Flatpickr

Hi!


I'm trying to set up a calendar for a survey that's part of a longitudinal study, and I want the respondent to select a date that is between when they last took the survey (embedded data) and today. I'm unfamiliar with JS. This is what I have so far:

Qualtrics.SurveyEngine.addOnload(function () {

var mindate = "${e://Field/subdate_v1_cal}"

  var input = jQuery("#"+this.questionId+" .InputText");

  input.flatpickr({

   dateFormat: "m/d/Y",

minDate: mindate ,

    maxDate: "today"

  });

});


Does anyone have any ideas? Thank you!!

Tagged:

Best Answer

Answers

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭

    Hi @skochhar ,

    Check the console if there is any error in your code, here is the alternative code for datepicker,

    Put the below links in the Look & feel - General -> header -> source

    <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

    <link href="/resources/demos/style.css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    Add the below code in your text entry question and just replace the minDate with your embedded data field, see below example,

    Qualtrics.SurveyEngine.addOnload(function()
    	{
    		/*Place your JavaScript here to run when the page loads*/
    jQuery(".InputText").addClass("datepick")
    });
    
    
    Qualtrics.SurveyEngine.addOnReady(function()
    {
    jQuery( function() {
     jQuery( ".datepick" ).datepicker({
    	changeYear: true,
    	changeMonth: true,
    	minDate: -379,
    	maxDate: 0,
    	dateFormat: "mm/dd/yy"
    	
    }).attr('readonly', 'true').
    keypress(function(event){
      if(event.keyCode == 8){
        event.preventDefault();
      }
    });
    		 
     } );	
    jQuery(".datepick").focus(function() {
            jQuery(".datepick").datepicker("show");
        });
       jQuery(".datepick").focus();
    
    
    });
    


  • skochharskochhar New York, NYCommunity Member Qubie ✭

    Thank you so much! I copied that code, but it still didn't quite work.

    Should I replace minDate with "${e://Field/subdate_v1_cal}" or just "subdate_v1_cal"? The dates in subdate_v1_cal are formatted as "7/14/2020", for example.

    Qualtrics.SurveyEngine.addOnload(function()
    	{
    		/*Place your JavaScript here to run when the page loads*/
    jQuery(".InputText").addClass("datepick")
    });
    
    
    
    
    Qualtrics.SurveyEngine.addOnReady(function()
    {
    jQuery( function() {
     jQuery( ".datepick" ).datepicker({
    	changeYear: true,
    	changeMonth: true,
    	minDate: "${e://Field/subdate_v1_cal}",
    	maxDate: 0,
    	dateFormat: "mm/dd/yyyy"
    	
    }).attr('readonly', 'true').
    keypress(function(event){
      if(event.keyCode == 8){
        event.preventDefault();
      }
    });
    		 
     } );	
    jQuery(".datepick").focus(function() {
            jQuery(".datepick").datepicker("show");
        });
       jQuery(".datepick").focus();
    
    
    
    
    });
    


     

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭
    edited July 14

    The minDate is the value of number of previous days from today's date. For example if you want to keep the minDate to 1st Jne 2020, the minDate should be -43 and in the drop down you will be able to see min date can be allowed to Jun and before June there isn't any option. if your embedded variable formatted like date format then just do some calculation and like today date minus the embedded variable date, the result value will be minDate.

    Also, do one more change in dateformat --> dateFormat: "mm/dd/yy" instead of dateFormat: "mm/dd/yyyy"



  • skochharskochhar New York, NYCommunity Member Qubie ✭

    Thanks so much @TomG, that worked perfectly!

Sign In to Comment