Text: Calendar Widget

This article will help you program a Calendar Exercise

Calendar Exercise

This article will show you how to program a Calendar Exercise using a standard text question

Click here to see an example

Instructions - Calendar Exercise

1. Add a 'Text Fields' question type to your survey with all of the appropriate responses
   1. See article: Add a Question: Text Fields
   2. Add 2 responses. These will hold the date in the corresponding formats in each response
      • yy-mm-dd
      • mm/dd/yy
2. Access the Overall Question Settings
   1. See articles: Overall Question Settings
   2. In these settings change the min and max range to both be 10 characters
      
3. Add the code below to your 'ADD JAVASCRIPT'. 
   1. See article: Adding JavaScript and/or CSS to a Question
      

      var picker = jQuery(".cm-qtext");
      var showBox = picker.find("input[type='text']");
      var realBox = jQuery(".cm-text-response-set li:nth-child(1) .cm-text-input");
      var realBox2 = jQuery(".cm-text-response-set li:nth-child(2) .cm-text-input");
      
      
      picker.datepicker({
        dateFormat : "mm/dd/yy",
        maxDate : 0,
        onSelect: function(dateText) {
          showBox.val(dateText);
          realBox2.val(dateText);
        },
        altField : realBox,
        altFormat : "yy-mm-dd"
      });
      
      
      jQuery(".fieldset").hide();
      showBox.attr("readonly", true);
      realBox.val("");
      		

4. Add the code below to your 'ADD CSS'. 
   1. See article: Adding JavaScript and/or CSS to a Question

      /****** DISPLAY DATE ONCE SELECTED ******/
      .cm-qtext input[type='text'] {
        border: none;
        background: inherit;
        width: auto;
        font-size: 90%;
        font-weight: bold;
        color: red;
      }
      
      
      /****** CALENDAR INTERFACE *******/
      .ui-datepicker {
        margin-top: 1%;
      }
      
      .ui-datepicker-calendar th {
        border-bottom: 1px solid black;
      }
      		

5. If you would like the date to be displayed, add the following into the Source Code Editor
   1. See article: Source Code Editor

       <input type="text">
      		

6. If you want more information and/or uses for this exercise, visit: http://api.jqueryui.com/datepicker/