Timepicker / PickaTime Javascript code question

Try the below code

Qualtrics.SurveyEngine.addOnload(function() {

  // Array of time options

  var timeOptions = [

    '1:00', '1:15', '1:30', '1:45',

    '2:00', '2:15', '2:30', '2:45',

    '3:00', '3:15', '3:30', '3:45'

    // Add more time options as needed

  ];

  // Function to create the drop-down menu

  function createTimeDropdown() {

    var timeDropdown = document.createElement('select');

    // Add each time option as an <option> element

    for (var i = 0; i < timeOptions.length; i++) {

      var option = document.createElement('option');

      option.value = timeOptions[i];

      option.text = timeOptions[i];

      timeDropdown.appendChild(option);

    }

    // Append the drop-down menu to the desired element on the page

    var targetElement = document.getElementById('time-dropdown'); // Replace 'time-dropdown' with the ID of the target element

    targetElement.appendChild(timeDropdown);

  }

  // Call the function to create the drop-down menu

  createTimeDropdown();

});
 

To use this code, follow these steps:

1. In your Qualtrics survey, create an element (e.g., a text question) and assign it a unique ID (e.g., "time-dropdown").
2. Replace 'time-dropdown' in the code with the ID of the element you created in step 1.
3. Customize the timeOptions array with the desired time options. Add or remove options as needed.
4. Save the changes and test the survey to see the drop-down menu with the selectable time options.

Hi, to put this in place within Qualtrics, the pickadate library will need to be loaded in via the survey’s Header. Also, the “$” should be replaced with “jQuery” and the selector will need to point to something that exists on the page, like this.questionId.

To give it a try, first add the below to the survey’s Header by clicking “Edit” and then using the HTML/Source view “<>” to paste in the below:

<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/js/rainbow.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/css/main.css">
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css">
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css">

Then, head over to the Builder and create a Text Entry question that is set to Single line.

Finally, add the below to the question’s JavaScript in the OnReady section:

jQuery("#"+this.questionId+" .InputText").pickatime({
    // Translations and clear button
    clear: 'Clear',

    // Formats
    format: 'h:i A',
    formatLabel: undefined,
    formatSubmit: undefined,
    hiddenPrefix: undefined,
    hiddenSuffix: '_submit',

    // Editable input
    editable: undefined,

    // Time intervals
    interval: 30,

    // Time limits
    min: undefined,
    max: undefined,

      // Root picker container
    container: undefined,

    // Hidden input container
    containerHidden: undefined,

    // Close on a user action
    closeOnSelect: true,
    closeOnClear: true,

    // Events
    onStart: undefined,
    onRender: undefined,
    onOpen: undefined,
    onClose: undefined,
    onSet: undefined,
    onStop: undefined,

    // Classes
    klass: {

      // The element states
      input: 'picker__input',
      active: 'picker__input--active',

      // The root picker and states *
      picker: 'picker picker--time',
      opened: 'picker--opened',
      focused: 'picker--focused',

      // The picker holder
      holder: 'picker__holder',

      // The picker frame, wrapper, and box
      frame: 'picker__frame',
      wrap: 'picker__wrap',
      box: 'picker__box',

      // List of times
      list: 'picker__list',
      listItem: 'picker__list-item',

      // Time states
      disabled: 'picker__list-item--disabled',
      selected: 'picker__list-item--selected',
      highlighted: 'picker__list-item--highlighted',
      viewset: 'picker__list-item--viewset',
      now: 'picker__list-item--now',

      // Clear button
      buttonClear: 'picker__button--clear'
    }
  });

Hi @Tom_1842 Thank you for your notes on this thread.  They were really helpful for me getting this set up in my survey.  I am wondering if you can help me figure out how to limit the time range that shows up in the drop down for this question:

// Time limits min: undefined, max: undefined,

I do not want from 12am to 11:59 pm showing up but would like to limit the range to specific hours like 9am-6pm.

Hi @DanAmato , documentation on the Time limits for pickatime can be found here. To set the time range from 9am to 6pm, try updating the Time limits piece of JS with the below:

    // Time limits
    min: [9,0],
    max: [18,0],