1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Field Types
  5. Date fields
  1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Date fields

Date fields

Date fields allow you to add datepicker input fields to your WooCommerce product.

To add a date field, just choose ‘Date’ from the ‘Field Type’ dropdown list.

Standard parameters

See this article for an overview of the standard parameters available to checkbox group fields.

Date parameters

Date fields have some parameters that are not shared by all fields:

Min date today

Check this option to prevent dates earlier than today’s date from being selected.

Min date

Enter the earliest possible date that a user can select.

Max date

Enter the latest possible date that a user can select.

If you are specifying a minimum or maximum number of checkboxes, you might need to ensure that ‘Required field’ is checked in order to ensure that users select the required number of checkboxes.

Filter date field parameters

You can filter the parameters for your date fields, provided you’re familiar with the jQuery Datepicker: https://jqueryui.com/datepicker/.

Here’s an example of how to prevent the user from picking a Sunday from the calendar:

<?php
/**
* Filter date parameters to disable Sundays
*/
function prefix_filter_date_field_params( $params, $item ) {
$params[] = 'beforeShowDay : function( date ) {
var day = date.getDay();
return [ ( day != 0 ), false ];
}';
return $params;
}
add_filter( 'pewc_filter_date_field_params', 'prefix_filter_date_field_params', 10, 2 );

You can find out how to add this snippet here.

Set minimum date into the future

You can filter the date field’s minimum date setting so that it is a certain number of days into the future. In this example, we are setting the minimum date 10 days ahead – so if today is February 17, the first selectable date in the field will be February 27.

Change the ’10’ to ‘1’ if you want the minimum date to be tomorrow.

<?php
/**
* Set the minimum acceptable date to 10 days in the future
*/
function prefix_date_field_params( $params, $item ) {
$params[] = '"minDate" : 10';;
return $params;
}
add_filter( 'pewc_filter_date_field_params', 'prefix_date_field_params', 10, 2 );

Here’s how to add a snippet.

Set minimum date based on current time

Maybe you want to set the minimum date two days into the future if the current time has passed a certain point. In the example below, the minimum date is tomorrow, unless the current time is later than 6pm.

<?php
/**
* Set the minimum date differently if we're currently later than 18:00
*/
function prefix_date_field_params_after_time( $params, $item ) {
// Check if the time is later than 18:00
if( date( 'H' ) >= 18 ) {
$min_date = 2;
} else {
$min_date = 1;
}
$params[] = '"minDate" : ' . $min_date;
// $params[] = "beforeShowDay: $.datepicker.noWeekends";
return $params;
}
add_filter( 'pewc_filter_date_field_params', 'prefix_date_field_params_after_time', 10, 2 );

Disable weekends and specific dates in the date field

You can disable weekends in the date field by using this snippet:

<?php
/**
* Set the minimum acceptable date to 10 days in the future
*/
function prefix_date_field_params_disable_weekends( $params, $item ) {
$params[] = "beforeShowDay: $.datepicker.noWeekends";
return $params;
}
add_filter( 'pewc_filter_date_field_params', 'prefix_date_field_params_disable_weekends', 10, 2 );

Disable weekends and holidays

The following snippet will disable weekends and a list of holidays. You need to set the list using the format yy-mm-dd.

<?php
/**
* Disable weekends and holidays
*/
function prefix_date_field_params_disable_weekends_holidays( $params, $item ) {
$params[] = 'beforeShowDay : function( date ) {
// Disable holidays
var holidays = ["2020-04-13","2020-04-14"];
var datestring = jQuery.datepicker.formatDate( "yy-mm-dd", date );
if( holidays.indexOf( datestring ) != -1 ) {
return [ false, false ];
}
// Disable weekends
var day = date.getDay();
if( day == 0 || day == 6 ) {
return [ false, false ];
}
return [ true ];
}';
return $params;
}
add_filter( 'pewc_filter_date_field_params', 'prefix_date_field_params_disable_weekends_holidays', 10, 2 );

Here’s how to add the snippet to your site.

Add select fields for month and year to date field

You can make it easier for users to select a month and year by enabling select fields for each parameter.

Just add the following snippet:

<?php
/**
* Add select fields for month and year to date field
*/
function prefix_date_field_params_change_month( $params, $item ) {
$params[] = "changeMonth: true";
$params[] = "changeYear: true";
$params[] = "yearRange: '1900:2030'";
return $params;
}
add_filter( 'pewc_filter_date_field_params', 'prefix_date_field_params_change_month', 10, 2 );

Here’s how to add a snippet.

Was this article helpful?

Related Articles