<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
    $('#question{QID} input[type="text"]').dateRangePicker({
      startOfWeek: 'monday',
      separator : ' ~ ',
      format: 'DD.MM.YYYY HH:mm',
      autoClose: false,
      time: {
        enabled: true
      }
    });
  });
</script>

<script type="text/javascript" charset="utf-8">  
 
  $(document).ready(function() {  
 
    // Identify some elements
    var thisQuestion = $('#question{QID}');
    var startDateTextBox = $('input.text:eq(0)', thisQuestion);
    var endDateTextBox = $('input.text:eq(1)', thisQuestion);
 
    var surveyRoot = location.pathname.split('index.php')[0];
 
    // Define the timepicker    
    function insertPicker() {
      $.timepicker.datetimeRange(
        startDateTextBox,
        endDateTextBox,
        {
          minInterval: (1000*60*60), // 1hr
          dateFormat: 'dd M yy', 
          timeFormat: 'HH:mm',
          start: { }, // start picker options
          end: { } // end picker options          
        }
      );
    }
 
    // Insert the timepickers
    if (!$.isFunction($.fn.timepicker)) {      
      $('head link[rel="stylesheet"]').last().after('<link rel="stylesheet" href="'+surveyRoot+'third_party/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.css" type="text/css" media="screen">');
      $.getScript( surveyRoot+'third_party/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.js', function( data, textStatus, jqxhr ) {
        insertPicker();
      });
    }
    else {  
      insertPicker();
    }
  });
</script>