Let user select time and date to store in a datetime field | Community
Skip to main content
Franky_Ruyssch2
Franky_Ruyssch2
New Participant
January 2, 2019
Solved

Let user select time and date to store in a datetime field

  • January 2, 2019
  • 2 replies
  • 5718 views

I have create a new Custom Field , and the datatype is datetime.

I wanted to use this field to let users define the exact date and time for an appointment.

When I drag the field on a form, I can select the Field type, but I only see a date option, and not a datetime.

Is there an easy way to let users select the date and the time and store it in my defined datetime field?

Or should I split this up , create a date field and a time field? And use an option list for the time input?

Proposals?

Best answer by Nicholas_Hajdin

The easiest way to do this will be splitting up as you noted, using Select as field type and listing out the time slots as the field value options. I would create a custom field String type "Appointment Time" and provide those options to your users. This will also give you more control over when appointments are scheduled.

If you need this information relayed to Sales you can use tokens such as {{lead.Appointment Date}} and {{lead.Appointment Time}}.

2 replies

SanfordWhiteman
SanfordWhiteman
New Participant
January 3, 2019

Definitely not a fan of splitting into 2 fields on the back end. That destroys the ability to do datetime math in filters and flows... it's a net loss, and the DateTime datatype has these powers for a reason.

Now on the front end, there's no single user expectation for a datetime picker (due to a combo of spotty browser support and different choices made by the browsers that do implement type=datetime). So the best solutions are custom JS-based widgets which allow you to predict/control the look across platforms. These all split out the date and time visually, but consolidate to a single DateTime field on form submission, which is what you want on the back end.

A basic example using the Flatpickr widget with a Marketo form is here:

      MktoForms2 :: DateTimePicker (flatpickr) v1.0.0

If you like another widget better, that will work too. They all have the same concept: enhance an <input type=text> visually using dynamic elements, write to the real field under the hood.

Vincent_Ferugl1
Vincent_Ferugl1
New Participant
May 11, 2022

Thank you @SandfordWhiteman for these codes.

 

However, I don’t understand how to use them.

Should I use the HTML code in a form in the HTML of a rich text?

Should I modify anything in the code?

How to link this code with my datetime field?

 

Thank you.

Darshil_Shah1
Darshil_Shah1
Community Manager
May 12, 2022

You'd need to replace "Letter_Date__c" in the below line of the JS code with the SOAP API name of the respective datetime field that you're using in your form, you don't need to make any another changes to the rest of the JS code -

 

var convertToDateTime = ["Letter_Date__c"];

 

You can search the SOAP API name of the field by exporting the Field Names from the Admin > Field Management section.

 

You can add the JS in the HTML section of the rich-text element along with the form embed JS (note that you don't need to re-add the form embed JS if you've already added it or if in-case you've added the form using the form element on the LP). Add the reference to the external flatpickr CSS file and styles from the codepen's HTML section to the "Custom Head HTML" area in the "Edit Page Meta Tags" option of the Marketo LP.

Let us know if you have any questions. 🙂

 

Nicholas_Hajdin
Nicholas_HajdinAccepted solution
New Participant
January 2, 2019

The easiest way to do this will be splitting up as you noted, using Select as field type and listing out the time slots as the field value options. I would create a custom field String type "Appointment Time" and provide those options to your users. This will also give you more control over when appointments are scheduled.

If you need this information relayed to Sales you can use tokens such as {{lead.Appointment Date}} and {{lead.Appointment Time}}.

Terms & ConditionsAccessibility statement

Loading footer...