[Closed] Toolset date field format

[Author]

Posts

[collectiveU]

Hi,

If you refer to the following video, you will see that:
a) I've built a dynamic form and based on the selection of the "your unsubmitted social rounds", the "date played" field is being filled in. The way this is being done is by using the following JS

  var nominateddate_jsdate = new Date(moment.unix(nominateddate));
  jQuery('input[name="wpcf-social-date-played[display-only]"]').datepicker( 'option', 'dateFormat', 'dd/mm/yy'); // set display as dd/mm/yyyy
  jQuery('input[name="wpcf-social-date-played[display-only]"]').datepicker( 'setDate', nominateddate_jsdate); // sent as JS date format
  jQuery('input[name="wpcf-social-date-played[datepicker]"]').attr('value',nominateddate); // sent as unix

b) As you can see, the date that is filled in is 16/12/2020 which is correct.
c) When a user edits that field though, the toolset form is not accurately getting the date from the selection. ie. You will see that in this scenario, when selecting 15/12/2020 from the datepicker, the value that is presented is 15/12/2001.

I think this is created to the following code but if I remove this then the unix date "nominateddate" is being presented as 16122020 without the "/".. where as it should be presented as 16/12/2020.

  jQuery('input[name="wpcf-social-date-played[display-only]"]').datepicker( 'option', 'dateFormat', 'dd/mm/yy'); // set display as dd/mm/yyyy

I had a look at your forums and thought that I could see the "date_format" option in Settings>General but this could not be found. Not sure if this is related.

Any assistance re: this date field would be great?

hidden link

Cheers

[collectiveU]

I think from your end, it's potentially this code and the fact that I've modified the format to dd/mm/yyyy?

    public function wpt_localize_extended_date() {
        if (!isset($_POST['date'])) {
            die();
        }
        $date = $_POST['date'];
        $date_format = '';
        if (isset($_POST['date-format'])) {
            $date_format = $_POST['date-format'];
        }
        if ($date_format == '') {
            $date_format = get_option('date_format');
        }
        $date = adodb_mktime(0, 0, 0, substr($date, 2, 2), substr($date, 0, 2), substr($date, 4, 4));
        $date_format = str_replace('\\\\', '\\', $date_format);
        echo json_encode(array('display' => adodb_date($date_format, $date), 'timestamp' => $date));
        die();
    }

[Christian Cox]

Hello, Forms supports this date format natively:
30/12/2020 (i.e. two digit date/two digit month/four digit year)

In wp-admin > Settings > General, if you select the Date Format option d/m/Y, the date format shown above should be applied automatically to any date field presented by Forms. So I'm not quite clear what you're trying to accomplish - do you want to display datepicker date formats in a format that is different from the chosen site date format? Or is the issue that the date set programmatically is displayed in the wrong format, regardless of the site's date format settings?

[collectiveU]

Hi Christian,

The latter.
So my settings is saved as d/m/Y which is correct but what's happening is that when I populate the date dynamically via JS using the following code, it displays the date in the format of DDMMYYYY without the forward slash(es).

var nominateddate_jsdate = new Date(moment.unix(nominateddate));
jQuery('input[name="wpcf-social-date-played[display-only]"]').datepicker( 'setDate', nominateddate_jsdate); // sent as JS date format
jQuery('input[name="wpcf-social-date-played[datepicker]"]').attr('value',nominateddate); // sent as unix

So therefore, I'm setting the DateFormat of the field as below which works fine when populating the value via JS but when a user then goes and uses that field and edits the field via datepicker, the datepicker itself uses a different date from 2001 as opposed to 2020 so therefore, I think the issue is with the following code of your function potentially?

jQuery('input[name="wpcf-social-date-played[display-only]"]').datepicker( 'option', 'dateFormat', 'dd/mm/yy'); // set display as dd/mm/yyyy 

[Christian Cox]

The problem with the latter issue is that there is no public JS API for Forms, so there is limited support here in the forums for setting dates programmatically with JavaScript. Our developers won't address issues that arise from setting dates programmatically like this. Another User had some luck setting a date programmatically like so:

jQuery('input[name="wpcf-fieldslug[display-only]"]').attr('value','30/12/2020');
jQuery('input[name="wpcf-fieldslug[datepicker]"]').attr('value',1609286400);

You might try this out to see if it works better than your current solution, but as I said it's not officially supported here in the forums and we don't guarantee this will work in all scenarios.

[collectiveU]

Hi Christian,

Can you please raise a defect with the developers as we've had to make the following two changes.

The following file /wp-content/plugins/types/vendor/toolset/toolset-common/toolset-forms/js/date.js on line 115 has the DateFormat set as 'ddmmyy' where as in line 116, DateFormat is being derived from wptDateData.dateFormat (i.e. From wordpress setting).

The following file /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/types/vendor/toolset/toolset-common/toolset-forms/bootstrap.php on line 127 has been updated to the following:

$date = adodb_mktime(0, 0, 0, substr($date, 3, 2), substr($date, 0, 2), substr($date, 6, 4));

We would appreciate if this could be reviewed and makes it's way into the next release.

Cheers

[Jamal]

Hello! Christian is on vacation for a couple of days. If you don't mind, I'll continue with you on this issue.

I'll be happy to escalate this issue to our 2nd Tier for another opinion if you can reproduce a minimal example in this test site hidden link

All the required plugins are available there. Just create a minimal form to demonstrate this issue and let me give it a try.