[Resolved] Presetting date/time field results in weird behaviour

[Author]

Posts

[davidS-53]

Following on from this thread- (I thought I'd solved it but only just got round to testing) https://toolset.com/forums/topic/setting-maxdate-on-date-field-in-cred-form-resets-default-value/

I have adapted some JQuery that restricts the possible values of a datetime CRED field to past dates. It also presets both the date and time fields to the current datetime. Here's my code:

		$('input[name="wpcf-date-checked[display-only]"]').datepicker( 'option', {minDate: '-5y', maxDate: 0} );
		$('input[name="wpcf-date-checked[display-only]"]').datepicker( 'option', 'dateFormat', 'MM d, yy' );
		$('input[name="wpcf-date-checked[display-only]"]').datepicker( 'setDate', new Date() );

		var dt = new Date();
		var hour = dt.getHours();
		var minute = dt.getMinutes();

		$('select[name="wpcf-date-checked[hour]"]').val(hour);
		$('select[name="wpcf-date-checked[minute]"]').val(minute);

The problem I have just discovered is that if I now use the datepicker to change the date to a past date, it restricts the date correctly but attempts to set the value of the field to November 30 1999 (see screenshot)? Any idea why that may be?

[Luo Yang]

Hello,

This is abnormal, I have tried your JS codes codes in my localhost with a fresh wordpress installation + the latest version of Toolset plugins, it works fine, there isn't similar problem as you mentioned above:
use the datepicker to change the date to a past date, it restricts the date correctly but attempts to set the value of the field to November 30 1999

Please try these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate other plugins, and switch to wordpress default theme 2019, and test again

3) Also check if there is any JS errors in your website.
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/#javascript-debugging

[davidS-53]

Hi Luo, I have followed your suggestions above and the problem persists.

I have also tried it and confirmed the issue exists on a fresh install with just toolset, 2019 and basic post types for testing set up.

[Luo Yang]

I have tried your JS codes in below test site, but there isn't the same problem:

use the datepicker to change the date to a past date, it restricts the date correctly but attempts to set the value of the field to November 30 1999

Test site:
hidden link
username/password: xgren/111111

Please duplicate the same problem in above test site, thanks

[davidS-53]

Luo, the demo site you've pointed me to has two errors.

One: The date field is not prepopulated with today's date.

Two: The date field allows the selection of future dates.

See screenshot.

Quite simply, all I am trying to achieve is a) preset the date/time field with the current date/time and b) prevent selection of dates in the future.

[Luo Yang]

Those two errors you mentioned above are from your custom JS codes, I only copy/paste them into the demo site.

For the new question:
a) preset the date/time field with the current date/time and
b) prevent selection of dates in the future.

It needs custom JS codes, for example:

jQuery( document ).ready(function($) {
   setTimeout(function() {
     $('input[name="wpcf-date-checked[display-only]"]').datepicker("option", "minDate", "-5Y");
     $('input[name="wpcf-date-checked[display-only]"]').datepicker("option", "maxDate", "0" );
     $('input[name="wpcf-date-checked[display-only]"]').val( new Date() );
    }, 500 );
  
  var dt = new Date();
  var hour = dt.getHours();
  var minute = dt.getMinutes();

  $('select[name="wpcf-date-checked[hour]"]').val(hour);
  $('select[name="wpcf-date-checked[minute]"]').val(minute);
  
});

See the result here:
hidden link

[davidS-53]

Sweet so I see you've added a timeout to it, it now presets the date field. However, the prepopulated value now has the time in the date field as well (see screenshot). It displays correctly if you then change the value.

How would one get the initial date value displaying correctly? I assume I need to format the Date() value?

[Luo Yang]

Yes, you need to format the date value, for example:

var my_date = $.datepicker.formatDate( 'MM d, yy', new Date() );
console.log(my_date );

You should be able to see the formatted date value in your browser console window

See jQuery document:
hidden link

[davidS-53]

Perfect, cheers.