[Resolved] Adding dates to post using textual input

[Author]

Posts

[amosE]

Hi,

In the database site that I'm working on, I've created a post type called 'anime' with custom fields for that post type.
One of those fields is supposed to include the date in which the anime originally aired. This also related to several other post types that would use dates, such as date of birth of people involved in production etc.
Currently the 'date' field type does allow me to enter a date and then display it in a DDMMYY format, however that requires quite a lot of time going through the calendar-interface (scrolling years back every time) instead of simply inputting the information textually. Is there a way to change this method of input?
I would also like to note that the information input will be mostly done through a CRED interface and not the admin panel if that helps.

Thanks and kind regards,
Amos

[Nigel]

Hi Amos

It would be possible but you would have to write your own JS logic to replace the datepicker functionality.

The reason is that the dates in the database are stored as UNIX timestamps (a long number that looks nothing like a date).

If you examine the date input fields for a CRED form with your browser dev tools you will see that there are two fields. One is the visible readonly field where the textual date is inserted after selection using the datepicker, the second is a hidden field where the date converted to the required UNIX format is inserted, and it is this field which is the actual field saved upon form submission.

You could disable the datepicker and write code to achieve something similar, where your users write a date in some text format and you then convert that to the required UNIX format to populate the hidden field.

Note that with the datepicker, which has dropdown options for the month and year, once you select the year, for example, you don't have to scroll back to a given year, you can simply type it to "zoom" in to the required year.

If you try to implement a custom solution and run into problems let me know and I can try and help.

[amosE]

Hello Nigel,

Thank you for your prompt reply.
I tried researching and implementing the JQuery date picker into my site using the code provided here hidden link with Code Snippets that you've kindly introduced to me in my other support thread and applied it globally to the site, though it didn't seem to affect Toolset's custom forms.
Is there a specific place that I'm missing in which I'm supposed to enter the code just for custom fields?
Your help is highly appreciated on the matter.

Amos

[Nigel]

Hi Amos

Perhaps I've misunderstood something, because in your original question it sounded like you wanted to *not* use a datepicker and in your reply you talk about adding it yourself.

Let me clarify.

A Types date field will automatically use jQuery datepicker when entering a date, either on the backend or on the frontend when added to a CRED form (see the screenshot). Select a date and it enters a text date in the visible field and the timestamp in the hidden actual field.

You should not need to manually add the jQuery datepicker as that is what is already being used by Toolset.

[amosE]

Sorry Nigel, it seems that I didn't realize that the current datepicker used is also JQuery (actually I didn't realize that 'datepicker' refers only to the calendar-UI).
What I meant is that I want the date input to work similarly to how it appears in this page:
hidden link
i.e While the calendar datepicking is still there, you can use still input the date using text.
That's why I figured that inputting a code for JQuery would help, but it seems that I was wrong.

Regardless, could you advise on where to start in order to change the code myself so as not to trouble you too much?

Thanks again,
Amos

[Nigel]

Hi Amos

You can't type the date into the field by design.

The "real" date field, which is hidden, stores the date as a UNIX timestamp.

When someone enters a date in the visible field, some JS code runs to convert that date into a UNIX timestamp and then update the hidden field with that value.

The reason users must select a date with the datepicker and not freely enter text into the date field is because the datepicker ensures a consistent date format to convert from. If you let users type a date in the date field they are unlikely to enter a consistent correct format, so that converting this date to a timestamp for the hidden field will likely fail.

That's how the Types address field is designed to work.

If you want an alternative method you would need some way of converting the date which your users enter into a timestamp which you will need to populate the hidden date field with, and there are third party JS libraries you might use for that (such as datejs: hidden link),

So, you would need to
- dequeue the Toolset JS file that manages the date field functionality
- enqueue any alternative assets such as datejs required to convert the date
- add an event handler to the visible date field which, when a date is entered, converts the date to a timestamp and updates the hidden field

If that is not something you can do yourself, we have a new Toolset Contractors programme where you can contact developers familiar with Toolset to hire them for bespoke work: https://toolset.com/contractors/

[amosE]

Hello Nigel,

Thank you for the reply.
Well, at first I thought that maybe it was just a bug on my end, because here
https://toolset.com/documentation/customizing-sites-using-php/functions/#date
the text in the date field doesn't seem grayed out..

It does seem a bit complicated, but I'll try to learn how to do so myself for the time being. Could you tell me which file handles the date functionality for types only? So as not to dequeue JS query in general. I think I'll be able to figure out the rest.

Thanks again,
Amos

[Nigel]

Hi Amos

The script handle is wptoolset-field-date so you can dequeue like so:

/**
 * Dequeue date.js
 */
function dequeue_datejs(){

	wp_dequeue_script('wptoolset-field-date');
}
add_action( 'wp_print_scripts', 'dequeue_datejs' );

That will, of course, break the set up which adds datepicker to the field which you actually see on the front end, which has a readonly attribute that you will need to remove for your users to be able to type in it.

Good luck!

[amosE]

Dear Nigel,
Thank you for the response. I'll try to clear some time and implement it, though it does seem that I have some learning to do before being able to do so..

If possible, I would like to request that the date input by text will be a core feature of Types since I'm sure that others will benefit from it as well.

Kind regards,
Amos