Below, you’ll find a detailed guide on how to add the Date Time Picker Field Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Date Time Picker Field Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Date Time Picker Field Plugin and the shortcodes it provides:
"Availability Datepicker plugin integrates with Contact Form 7 and Divi. It adds a date-time picker field to your forms, enabling users to easily select availability dates and times."
- [datetimepicker]
Date Time Picker Field [datetimepicker] Shortcode
The Date-Time-Picker-Field shortcode is a versatile tool that enables users to select dates and times in a more interactive manner. The shortcode: [datetimepicker], is designed to load necessary scripts and styles for the date-time-picker-field plugin. It fetches the timezone, plugin version, and adjusts the jQuery version based on the WordPress version. It then enqueues scripts and styles from the plugin’s assets. The shortcode also retrieves and merges options from the ‘dtpicker’ and ‘dtpicker_advanced’ options. It sanitizes and formats these options, including disabled days, allowed times, offsets, steps, and locale. It also sets up the minimum and maximum selectable time and date, and formats these according to the user’s settings. The shortcode finally localizes the scripts with these options, ready for use on the front-end.
Shortcode: [datetimepicker]
Examples and Usage
Basic example – The shortcode below will utilize the default parameters set in the ‘datetimepicker’ shortcode. This basic usage is ideal for situations where you want to use the same date and time picker settings across multiple instances on your website, and you don’t require any specific customization for each instance.
[datetimepicker /]Advanced examples
The shortcode below demonstrates an advanced usage of the ‘datetimepicker’ shortcode, where we’re overriding the default settings for the datepicker and timepicker options. This is useful in situations where you want to have a different configuration for the date and time picker for specific instances on your website.
[datetimepicker datepicker="on" timepicker="off" /]Another advanced example of the ‘datetimepicker’ shortcode is shown below, where we’re specifying the minimum and maximum time that can be selected within the time picker. This can be particularly useful for situations where you want to restrict the available times that can be selected, such as for booking appointments or reservations within specific time slots.
[datetimepicker minTime="10:00" maxTime="18:00" /]In the following example, the ‘datetimepicker’ shortcode is used to specify the date format. This is beneficial when you want to display the date in a specific format that differs from the default format set in your WordPress settings.
[datetimepicker dateformat="d-m-Y" /]The last advanced example shows how to use the ‘datetimepicker’ shortcode to set a specific locale for the date and time picker. This can be useful for websites that cater to an audience from a specific locale, and you want to display the date and time in a format that is familiar to them.
[datetimepicker locale="fr" /]PHP Function Code
In case you have difficulties debugging what causing issues with [null] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'datetimepicker', array( $this, 'scripts' ) );Shortcode PHP function:
function scripts() {
$tzone = $this->get_timezone_name();
$version = $this->get_version();
global $wp_version;
if ( version_compare( $wp_version, '5.6', '>=' ) ) {
$jquery_slug = 'jquery-core';
} else {
$jquery_slug = 'jquery';
}
wp_enqueue_script( 'dtp-moment', plugins_url( 'assets/js/vendor/moment/moment.js', dirname( __FILE__ ) ), array( $jquery_slug ), $version, true );
wp_enqueue_style( 'dtpicker', plugins_url( 'assets/js/vendor/datetimepicker/jquery.datetimepicker.min.css', dirname( __FILE__ ) ), array(), $version, 'all' );
wp_enqueue_script( 'dtpicker', plugins_url( 'assets/js/vendor/datetimepicker/jquery.datetimepicker.full.min.js', dirname( __FILE__ ) ), array( $jquery_slug ), $version, true );
wp_enqueue_script( 'dtpicker-build', plugins_url( 'assets/js/dtpicker.js', dirname( __FILE__ ) ), array( 'dtpicker', 'dtp-moment' ), $version, true );
$opts = get_option( 'dtpicker' );
$optsadv = get_option( 'dtpicker_advanced' );
// merge advanced options.
if ( is_array( $opts ) && is_array( $optsadv ) ) {
$opts = array_merge( $opts, $optsadv );
}
// day of start of week.
$opts['dayOfWeekStart'] = get_option( 'start_of_week' );
// sanitize disabled days.
$opts['disabled_days'] = isset( $opts['disabled_days'] ) && is_array( $opts['disabled_days'] ) ? array_values( array_map( 'intval', $opts['disabled_days'] ) ) : '';
$opts['disabled_calendar_days'] = isset( $opts['disabled_calendar_days'] ) && '' !== $opts['disabled_calendar_days'] ? explode( ',', $opts['disabled_calendar_days'] ) : '';
$opts['allowed_times'] = isset( $opts['allowed_times'] ) && '' !== $opts['allowed_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['allowed_times'] ) ) : '';
$opts['sunday_times'] = isset( $opts['sunday_times'] ) && '' !== $opts['sunday_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['sunday_times'] ) ) : '';
$opts['monday_times'] = isset( $opts['monday_times'] ) && '' !== $opts['monday_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['monday_times'] ) ) : '';
$opts['tuesday_times'] = isset( $opts['tuesday_times'] ) && '' !== $opts['tuesday_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['tuesday_times'] ) ) : '';
$opts['wednesday_times'] = isset( $opts['wednesday_times'] ) && '' !== $opts['wednesday_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['wednesday_times'] ) ) : '';
$opts['thursday_times'] = isset( $opts['thursday_times'] ) && '' !== $opts['thursday_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['thursday_times'] ) ) : '';
$opts['friday_times'] = isset( $opts['friday_times'] ) && '' !== $opts['friday_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['friday_times'] ) ) : '';
$opts['saturday_times'] = isset( $opts['saturday_times'] ) && '' !== $opts['saturday_times'] ? array_map( array( $this, 'time_24' ), explode( ',', $opts['saturday_times'] ) ) : '';
// offset.
$opts['offset'] = isset( $opts['offset'] ) ? intval( $opts['offset'] ) : 0;
$opts['days_offset'] = isset( $opts['days_offset'] ) ? intval( $opts['days_offset'] ) : 0;
// step.
$opts['step'] = isset( $opts['step'] ) && intval( $opts['step'] ) > 0 ? intval( $opts['step'] ) : 60;
// locale.
if ( isset($opts['locale']) && $opts['locale'] === 'auto' ) {
global $wp_locale;
$opts['locale'] = 'en';
// i18n - the datetime script needs the locale code to exist,
// we can't create new ones, so we just overwrite the english one.
$opts['i18n']['en'] = array(
'months' => array(
$wp_locale->month['01'],
$wp_locale->month['02'],
$wp_locale->month['03'],
$wp_locale->month['04'],
$wp_locale->month['05'],
$wp_locale->month['06'],
$wp_locale->month['07'],
$wp_locale->month['08'],
$wp_locale->month['09'],
$wp_locale->month['10'],
$wp_locale->month['11'],
$wp_locale->month['12'],
),
'dayOfWeekShort' => array(
$wp_locale->weekday_abbrev[ $wp_locale->weekday[0] ],
$wp_locale->weekday_abbrev[ $wp_locale->weekday[1] ],
$wp_locale->weekday_abbrev[ $wp_locale->weekday[2] ],
$wp_locale->weekday_abbrev[ $wp_locale->weekday[3] ],
$wp_locale->weekday_abbrev[ $wp_locale->weekday[4] ],
$wp_locale->weekday_abbrev[ $wp_locale->weekday[5] ],
$wp_locale->weekday_abbrev[ $wp_locale->weekday[6] ],
),
'dayOfWeek' => array(
$wp_locale->weekday[0],
$wp_locale->weekday[1],
$wp_locale->weekday[2],
$wp_locale->weekday[3],
$wp_locale->weekday[4],
$wp_locale->weekday[5],
$wp_locale->weekday[6],
),
);
}
// other variables.
$format = '';
$clean_format = '';
$value = '';
$opts['minTime'] = isset( $opts['minTime'] ) && $opts['minTime'] !== '' ? $opts['minTime'] : '00:00';
$opts['maxTime'] = isset( $opts['maxTime'] ) && $opts['maxTime'] !== '' ? $opts['maxTime'] : '23:59';
// workaround AM/PM because of offset issues.
$opts['minTime'] = $this->time_24( $opts['minTime'] );
$opts['maxTime'] = $this->time_24( $opts['maxTime'] );
if ( isset( $opts['datepicker'] ) && 'on' === $opts['datepicker'] ) {
$format .= $opts['dateformat'];
$clean_format .= $this->format( $opts['dateformat'] );
// max date.
if ( isset( $opts['max_date'] ) && $opts['max_date'] !== '' ) {
$temp_date = strtotime( $opts['max_date'] );
if ( $temp_date ) {
$opts['max_date'] = date( $clean_format, $temp_date );
$opts['max_year'] = date( 'Y', $temp_date );
}
}
// min date.
if ( isset( $opts['min_date'] ) && $opts['min_date'] !== '' ) {
$temp_date = strtotime( $opts['min_date'] );
if ( $temp_date ) {
$opts['min_date'] = date( $clean_format, $temp_date );
$opts['min_year'] = date( 'Y', $temp_date );
} else {
$opts['min_date'] = '';
}
}
}
if ( isset( $opts['timepicker'] ) && 'on' === $opts['timepicker'] ) {
$hformat = $opts['hourformat'];
$format .= ' ' . $hformat;
$clean_format .= ' H:i';
}
$opts['format'] = $format;
$opts['clean_format'] = $clean_format;
$next_available = $this->get_next_available_time( $opts );
#if( ! $opts['min_date'] ) {
#$opts['min_date'] = $next_available;
#}
#if ( 'off' === $opts['minDate'] ) {
#$opts['min_date'] = '';
#}
if ( isset( $opts['placeholder'] ) && 'on' === $opts['placeholder'] ) {
$opts['value'] = '';
} else {
if( isset( $opts['use_max_date_as_default'] ) && $opts['use_max_date_as_default'] ) {
$temp_date = strtotime( $opts['max_date'] );
if ( $temp_date ) {
$opts['value'] = date( $clean_format, $temp_date );
}
}else{
$opts['value'] = $next_available;
}
}
$tzone = get_option( 'timezone_string' );
$opts['timezone'] = $tzone;
$tzoffset = get_option( 'gmt_offset' );
$tzoffset = (strpos($tzoffset, '-') !== false ? '-' : '+') . abs($tzoffset);
$opts['utc_offset'] = $tzoffset;
$now = new DateTime( 'now', new DateTimeZone($tzoffset) );
$opts['now'] = $now->format( $opts['clean_format'] );
wp_localize_script( 'dtpicker-build', 'datepickeropts', $opts );
}
Code file location:
date-time-picker-field/date-time-picker-field/includes/DateTimePicker.phpConclusion
Now that you’ve learned how to embed the Date Time Picker Field Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply