Displaying and formatting dates and the datepicker

Please note that this article applies to versions 2.0.0 and above of the lite or full plugin. It would not be possible to follow it using versions of the plugin less than 2.0.0.

It is very easy to customize how the dates used by the plugin are displayed and formatted as well as the styling of the datepicker. Let’s see how all these are done.

Changing the default date format

The default php date format used by the plugin is 'F d, Y'. This means that dates are displayed, for example, as September 25, 2020 . To change this date format, simply use the filter ‘nmgr_date_format‘. This would make all dates outputted by the plugin to be displayed in the specified format.

For example to display dates as 25/10/20, use the code below:

add_filter('nmgr_date_format', 'change_nmgr_date_format');
function change_nmgr_date_format() {
  return  'd/m/y';
}

Changing the datepicker date format

The plugin uses jquery-ui datepicker to select dates such as the wishlist event date. The selected dates are also displayed in the input field in the same default date format used by the plugin, September 25, 2020. To change the date format used by the datepicker, use the filter ‘nmgr_datepicker_date_format‘. This would display the selected date in the input field in the specified format.

For example to display the date in the datepicker input field as 25/10/20, use the code below:

add_filter('nmgr_datepicker_date_format', 'change_nmgr_datepicker_date_format');
function change_nmgr_datepicker_date_format() {
  return  'd/mm/y';
}

Ideally you would want the date displayed in the datepicker input field to be in the same format as the default php date format used by the plugin for consistency good user experience, though this is not required.

One important thing to note about the datepicker format is that it must be in one of the formats accepted by jquery-ui datepicker. Please see their documentation page for available formats. The format used by the datepicker should be considered a javascript format which may not be compatible with php date formats. This is why there are separate filters in the plugin for the datepicker format and the php format.

Validating the datepicker date format

If you have changed the datepicker date format used by the plugin, it is highly recommended to validate the new format chosen in order to ensure that the plugin is able to manipulate and display the date chosen properly without any errors, and also to ensure that the user enters the right kind of date.

As said earlier, the date format used by the datepicker should be considered a javascript format and so it may not be compatible with php date formats. Validating the datepicker date format is simply a way of providing it’s php equivalent so that the date can be properly saved and manipulated by the plugin in php. This is done using the filter ‘nmgr_validate_date_format‘.

Example use case: Changing the event date

To give an example of when and how to validate the datepicker date, let’s say you want to display the wishlist event date in the datepicker input field as 25/09/20, you would change the datepicker date format to ‘d/mm/y’ using the filter nmgr_datepicker_date_format, as shown above. This typically should be all you need to do. But if you try to save the form in this case, the plugin may display an error that the date is not entered in the right format. This is because php cannot parse the format ’25/09/20′ by default because of the unknown character ‘/’. In this situation you would need to supply the php representation of this date format to the plugin so that the date can be parsed correctly. The code below shows how:

add_filter('nmgr_validate_date_format', 'validate_nmgr_datepicker_date_format');
function validate_nmgr_datepicker_date_format() {
  return  'd/m/y';
}

Once this is supplied, the form would save properly and the plugin would be able to manipulate the date as necessary.

Even in the case where the form is able to save properly without using this filter, it is still recommended to use the filter as long as you have changed the datepicker date format to ensure that the plugin is able to parse the date saved correctly.

Removing the datepicker styling

The jquery-ui datepicker calendar used by the plugin is given a nice modern 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, use the filter ‘nmgr_style_datepicker‘ and return false. The code below shows how:

add_filter('nmgr_style_datepicker', '__return_false');

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