Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

frm_date_field_js

Last Updated: May 23, 2019

Knowledge Base → Extend Formidable Forms → Formidable Hooks - for Developers → Field Appearance → frm_date_field_js
Heads up!
This article contains PHP code and is intended for developers. We offer this code as a courtesy, but don't provide support for code customizations or 3rd party development.

This hook allows you to customize the pop-up datepicker calendar in a date field that does not use any options from the Datepicker Options plugin.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
If further customizing a date field that uses the Datepicker Options plugin, use the frm_date_field_options hook.

Usage

add_action('frm_date_field_js', 'my_custom_function');

Parameters

  • $field_id (string)
  • $options (array)

Examples

Add calendar icon to field

Please see the example for the frm_date_field_options hook.

Example removed.

Blackout days of the week

Custom code is no longer needed. See the datepicker options to blackout days of the week.

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)];}';
  }
}

Blackout specific dates

Custom code is no longer needed. See the datepicker options to blackout dates.

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")];}';
  }
}

Custom, dynamic date range

Custom code is no longer needed. See the datepicker options to set minimum/maximum dates.

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';
  }
}

Set the minimum date for the second date field

Custom code is no longer needed. See the datepicker options to set minimum/maximum dates.

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)];}';
 	}
}

Set the default calendar year

Custom code is no longer needed. See the datepicker options to set the year range.

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"';
  }
}

Hide another field based on the selected date

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();} }';
  }
}

Update the date when switching years

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.

Set the minimum date for second repeating date field

Custom code is no longer needed. See the datepicker options to set minimum/maximum dates.

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)];
		}';
	}
}

Show month and year in inline format [deprecated]

Please see the example for the frm_date_field_options hook.

Example removed.
  • Usage
  • Parameters
  • Examples
    • Add calendar icon to field
    • Blackout days of the week
    • Blackout specific dates
    • Custom, dynamic date range
    • Set the minimum date for the second date field
    • Set the default calendar year
    • Hide another field based on the selected date
    • Update the date when switching years
    • Set the minimum date for second repeating date field
    • Show month and year in inline format [deprecated]
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews