Controlling the Date and Time Picker

You can find various scripting examples on further controlling the Date and Time Picker form element. Though this form element provides various configuration options, there may be times you need extra functionality.

Navigation:
Extra: Additional information, other scripting examples and functions can be found here.

All scripts are added via backend > Components > RSForm!Pro > Manage Forms > your form > Properties > CSS and JavaScript > JavaScript.


Remember to:
  • place the script including the <script> tags
  • replace myDateTimePickerNameHere with the exact name you've given (case sensitive)
  • replace 25 with your form ID (found via backend > Components > RSForm!Pro > Manage Forms > here, from the listing table, last column 'Form ID')


Disallow specific weekdays
<script type="text/javascript">
jQuery(document).ready(function(){
  myDateTPicker = RSFormPro.jQueryCalendar.calendars[25]['myDateTimePickerNameHere'];
  //replace 25 with your form ID and the date time picker name.
  myDateTPicker.callbackSelectedDateTime = function(selectedDateObject, calendarInstance, calendarDateObject, input, inputFormat) {
    weekDay = calendarDateObject.getDay();
    if(weekDay == 0 || weekDay == 6){
    //0 = Sunday, 1 = Monday and so on...
      alert('Please select another day than Saturday or Sunday.');
      return false;
    }
  }
});
</script>

Change calendar starting weekday
<script type="text/javascript">
jQuery(document).ready(function(){
  myDateTPicker = RSFormPro.jQueryCalendar.calendars[25]['myDateTimePickerNameHere'];
  //replace 25 with your form ID and the date time picker name.
  myDateTPicker.calendarInstance.setOptions({
    dayOfWeekStart: 1
    //0 = Sunday, 1 = Monday and so on...
  });
});
</script>

Disable dates
<script type="text/javascript">
jQuery(document).ready(function(){
  var myDisabledDates = ['02/23/2016','02/24/2016','02/27/2016'];
  //the dates you want to disable
  myDateTPicker = RSFormPro.jQueryCalendar.calendars[25]['myDateTimePickerNameHere'];
  //replace 25 with your form ID and the date time picker name.
  myDateTPicker.calendarInstance.setOptions({
    disabledDates: myDisabledDates
  });
});
</script>

Only show time picker

Important: You'll need to change the Date Time Picker format to H:i as you're only accepting time (edit the Date Time Picker element > Attributes > Date Format).

<script type="text/javascript">
jQuery(document).ready(function(){
  myDateTPicker = RSFormPro.jQueryCalendar.calendars[25]['myDateTimePickerNameHere'];
  //replace 25 with your form ID and the date time picker name.
  myDateTPicker.calendarInstance.setOptions({
    datepicker:false,
    timepicker:true
  });
});
</script>

Check user selection and switch to another date
<script type="text/javascript">
jQuery(document).ready(function(){
  myDateTPicker = RSFormPro.jQueryCalendar.calendars[25]['myDateTimePickerNameHere'];
  //replace 25 with your form ID and the date time picker name.
  myDateTPicker.callbackSelectedDateTime = function(selectedDateObject, calendarInstance, calendarDateObject, input, inputFormat) {
    if (selectedDateObject.selectedDate == '02/15/2016 16:00'){
      //selectedDate == m/d/Y H:i

      //below is the actual date/time you want to switch to
      calendarDateObject.setHours(22);
      calendarDateObject.setMinutes(30);
      calendarDateObject.setDate(03);
      calendarDateObject.setMonth(11); //11 = December, 0 = January, 1 = February, etc.
      calendarDateObject.setYear(2017);

      selectedDateObject.selectedDate = '12/03/2017 22:30';
      //this is the date that will be stored by the calendar input (your submission data)
      input.val(calendarDateObject.dateFormat(inputFormat));
      //the input value is formatted before being assigned
    }
  }
});
</script>

Change time to 12 hours format

Important: You'll need to change the Date Time Picker format to m/d/Y g:i A in order for your submission data to save the same format as well (edit the Date Time Picker element > Attributes > Date Format).

<script type="text/javascript">
jQuery(document).ready(function(){
  myDateTPicker = RSFormPro.jQueryCalendar.calendars[25]['myDateTimePickerNameHere'];
  //replace 25 with your form ID and the date time picker name.
  myDateTPicker.calendarInstance.setOptions({
  formatTime: 'h:mm A'
  });
});
</script>

54 persons found this article helpful.

Was this article helpful?

Yes No
Sorry about that