frm_date_field_js

This example adds a clickable calendar icon next to a date field. When the icon is clicked, it will pull up the calendar. It is recommended to move the icon image to your site's images folder and adjust the path in the code. You can change the icon to any image in your site's images folder.

add_action('frm_date_field_js', 'add_cal_icon');
function add_cal_icon($field_id){
  if ($field_id == 'field_FIELDKEY'){ //change FIELDKEY to the key of your date field
    echo ",showOn: 'button', buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',buttonImageOnly: true";
  }
}

This example blocks out Tuesdays(2) and Thursdays(4) in a date field. Change the numbers 2 and 4 to the days of the week that are blocked out. The numbers must be between 0 and 6 where 0 is Sunday and 6 is Saturday. Please note: If you have the 'Unique' option checked in your date field, you should use this code example instead.

add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
  if ($field_id == 'field_FIELDKEY'){ //change FIELDKEY to the key of your date field
    echo ',beforeShowDay: function(date){var day=date.getDay();return [(day != 2 && day != 4)];}';
  }
  else {
    echo ',beforeShowDay: null';
  }
}

If you need to blackout days of the week in two date fields, like a start date and end date, you can use this code:

add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
   if($field_id == 'field_FIELDKEY1' || $field_id == 'field_FIELDKEY2'){ //change FIELDKEY1 and FIELDKEY2 to the key of your date field
      echo ',beforeShowDay: function(date){var day1=date.getDay();return [(day1 != 0 && day1 != 1)];}';
   }
   else {
      echo ',beforeShowDay: null';
  }
}

If you need to blackout different days in two different date fields, use this example:

add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
   if ($field_id == 'field_FIELDKEY1'){ //change FIELDKEY1 to the key of your date field
      echo ',beforeShowDay: function(date){var day1=date.getDay();return [(day1 != 0 && day1 != 1)];}';
   } else if ($field_id == 'field_FIELDKEY2'){ //change FIELDKEY2 to the key of your date field
      echo ',beforeShowDay: function(date){var day=date.getDay();return [(day != 2 && day != 4)];}';
   } else {
      echo ',beforeShowDay: null';
  }
}

This example blocks out a few specific dates. Change 4k4w4j to the key of your date field. Dates are a little unusual in JavaScript. The month of January is 0 and December is 11. January 1st, 2016 would be 2016-0-01. December 25th, 2016 would be 2016-11-25. Make sure the dates in your code account for this difference. Please note: If you have the 'Unique' option checked in your date field, you should use this code example instead.

add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
  if ($field_id == 'field_4k4w4j'){ //change 4k4w4j to the key of your date field
    echo ',beforeShowDay: function (date){var d = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();return [(d != "2014-8-28" && d != "2014-9-12" && d != "2014-10-16")];}';
  }
  else {
    echo ',beforeShowDay: null';
  }
}

Use this code to allow users to pick from dates that fall in a custom, dynamic date range. This example will only allow users to select dates between today's date and 60 days later. To use specific dates, replace 0 and/or +60 with a date in the format new Date(2018, 2, 15). Please note that Javascript months start with 0, so this date is March 15, 2018.

However, users will still be able to manually type a date that falls outside of the custom dynamic range. In order force users to use the date picker, go to your Form Settings > Customize HTML, find the Date field HTML and change [input] to [input readonly="readonly"] and update your form.

add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
  if($field_id == 'field_FIELDKEY'){ //change FIELDKEY to the key of your date field
    echo ',minDate:0,maxDate:+60';
  } else {
    echo ',minDate: null, maxDate: null';	
  }
}

Use this code to make sure the date selected in an end date field comes after the date selected in the start date field. For example, if a user selects July 1st, 2015 for the start date, then the end date field will only allow them to select a date after July 1st, 2015. This code will also make sure the start date comes before the end date. Please note: This code will not apply to a Date field with the 'Unique' option checked.

add_action('frm_date_field_js', 'start_and_end_dates', 10, 2);
function start_and_end_dates($field_id, $options){
	$key_one = 'pickup';// Change pickup to the KEY of the first date field
	$key_two = 'dropoff';// Change dropoff to the KEY of the second date field
	$days_between = 0;// Change 0 to the number of days that should be between the start and end dates

	if ( $field_id == 'field_'. $key_one ) {
		echo ',beforeShowDay: function(dateOne){var secondDate=$("#field_' . $key_two . '").datepicker("getDate");if(secondDate==null){return[true];}var modDate=new Date(secondDate);modDate.setDate(modDate.getDate()-' . $days_between . '+1);return [(dateOne < modDate)];}';
	} else if ( $field_id == 'field_' . $key_two ) {
		echo ',beforeShowDay: function(dateTwo){var firstDate=$("#field_' . $key_one . '").datepicker("getDate");if(firstDate==null){return[true];}var modDate=new Date(firstDate);modDate.setDate(modDate.getDate() +  ' . $days_between . '-1);return [(dateTwo > modDate)];}';
	} else {
    		echo ',beforeShowDay: null';
 	}
}

Use this code to customize which date will be selected by default when a user pulls up the calendar. In this example, 20 years ago from today will be the selected date, if your calendar goes back that far.

add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
  if ($field_id == 'field_FIELDKEY1' || $field_id == 'field_FIELDKEY2'){ //change FIELDKEY1 and FIELDKEY2 to the keys of your date fields
    echo ',defaultDate:"-20y"';
  }
}

If the selected date is sooner than January 1st, 2016, hide another field. Replace 2016,0,1 with the year, month, and date you want to compare to. Keep in mind the months start with 0 being January.

add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
$key_one = 'FIELDKEY1'; //Change FIELDKEY1 to the key of your date field
$id_two = 'FIELDID2'; //Change FIELDID2 to the ID of your field to hide
  if($field_id == 'field_'. $key_one){
    echo ',onSelect:function(selectedDate,inst){
        var theDate=new Date(inst.selectedYear,inst.selectedMonth,inst.selectedDay);
        var hideDate=new Date(2016,0,1);
        if (theDate.valueOf() < hideDate.valueOf()){$("#frm_field_'. $id_two .'_container").hide();
        }else{$("#frm_field_'. $id_two .'_container").show();}
    }';
  }
}

add_action('frm_date_field_js', 'update_date_value');
function update_date_value( $field_id ) {
  if ( $field_id == 'field_FIELDKEY'){ //change FIELDKEY to the key of your date field
      $date_format = 'mm/dd/yy'; // change this to the format of your date field
?>
            ,onChangeMonthYear: function (year, month, inst) {
                var date = $('#<?php echo $field_id ?>').val();
                if ($.trim(date) != '') {
                    var newDate = month + '/' + inst.currentDay + '/' + year;
                    $('#<?php echo $field_id ?>').val($.datepicker.formatDate('<?php echo $date_format ?>', new Date(newDate)));
                }
            }
<?php
  }
}

See http://jqueryui.com/demos/datepicker/ for a full list of calendar options. All options can be used in functions similar to the ones shown above.

Use the following code to make sure the date selected in a repeating end date field comes after the date selected in the repeating start date field. For example, if a user selects July 1st, 2015 for the start date, then the end date field will only allow them to select a date after July 1st, 2015. This code will also make sure the start date comes before the end date. Replace 'pickup' with the KEY of your first date field and replace 'dropoff' with the KEY of your second date field. Please note: This code will not apply to a Date field with the 'Unique' option checked.

add_action('frm_date_field_js', 'start_and_end_dates_repeating', 10, 2);
function start_and_end_dates_repeating($field_id, $options){
	$days_between = 0;// Change 0 to the number of days that should be between the start and end dates
	$field_one = 'field_pickup';// Change pickup to the KEY of the first date field
	$field_two = 'field_dropoff';// Change dropoff to the KEY of the second date field

	if ( $field_id == '^' . $field_one ) {
		echo ',beforeShowDay: function(dateOne){
		var fieldId = this.id;
		var dashPosition = fieldId.lastIndexOf("-");
		var rowIndex = fieldId.substr(dashPosition);
		var fieldTwoId = "' . $field_two . '" + rowIndex;
		var secondDate=$("#' . $field_two . '"+rowIndex).datepicker("getDate");
		if(secondDate==null){return[true];}
		var modDate=new Date(secondDate);
		modDate.setDate(modDate.getDate()-' . $days_between . '+1);
		return [(dateOne < modDate)];
		}';
	} else if ( $field_id == '^' . $field_two ) {
		echo ',beforeShowDay: function(dateTwo){
		var fieldId = this.id;
		var dashPosition = fieldId.lastIndexOf("-");
		var rowIndex = fieldId.substr(dashPosition);
		var fieldTwoId = "' . $field_one . '" + rowIndex;
		var firstDate=$("#' . $field_one . '"+rowIndex).datepicker("getDate");
		if(firstDate==null){return[true];}
		var modDate=new Date(firstDate);
		modDate.setDate(modDate.getDate()+' . $days_between . '-1);
		return [(dateTwo > modDate)];
		}';
	}
}

By default, the month and year are displayed in dropdown lists. By using this code, it will allow you to show the month and year in the calendar display header and have users select dates by using the next/previous buttons.

add_action('frm_date_field_js', 'inline_month_year');
function inline_month_year($field_id){
if($field_id == 'field_FIELDKEY'){ //change FIELDKEY to the key of your date field
    echo ',changeMonth:false,changeYear:false';
  }
}