Displaying dates with the datepicker

This article applies to version 2.4.3 of the plugin and above.

The plugin uses jquery-ui datepicker to select dates such as the wishlist event date. In the datepicker, these dates are displayed in the javascript date format 'yy-mm-dd' such as 2021-10-05. However outside the datepicker they are displayed using the default wordpress date format set in the Settings > General page of the admin area.

Setting the datepicker options

The options used to create the datepicker can be changed via the filter nmgr_datepicker_options. This would allow you create the datepicker the way you want. For example to allow users to change the month and year as well as to set the minimum date they can pick and also append a text below the input showing the date format required, use the code below:

add_filter( 'nmgr_datepicker_options', 'my_nmgr_datepicker_options' );

function my_nmgr_datepicker_options( $options ) {
	$options[ 'appendText' ] = "(yyyy-mm-dd)"; //show this text below the input
	$options[ 'changeMonth' ] = true; // allow month change
	$options[ 'changeYear' ] = true; // allow year change
	$options[ 'minDate' ] = "1"; // minimum date that can be selected is tomorrow
	return $options;
}

To see the full list of options that can be used to compose the datepicker, visit the jquery-ui datepicker documentation page.

Removing the datepicker styling

The jquery-ui datepicker calendar used by the plugin is given a nice and visually appealing styling that should blend with any theme. This styling affects only the datepicker used by the plugin’s input fields and does not affect other input fields using same jquery-ui datepicker widget. If you however wish to remove the plugin’s styling for the datepicker as may be the case when there is a conflict with the styling used by another jquery-ui datepicker plugin or simply because you want to use your own custom styles, you can use the same nmgr_datepicker_options filter mentioned above and return false for the option styleDatepicker as shown below:

add_filter( 'nmgr_datepicker_options', 'my_nmgr_style_datepicker' );

function my_nmgr_style_datepicker( $options ) {
	$options[ 'styleDatepicker' ] = false;
	return $options;
}

Now you can use your own custom datepicker styles or revert to the theme’s default datepicker styling.