Create date/time from string via form

Question

I'm using the wonderful A&M form plugin to create a form on my site, and I have 3 dropdowns for the user's birthday: month, day, and year. Currently, I have it set up so that when the form submits, those values get put into a matrix field when logged in the form submissions entry in the CMS. I would prefer to have it put into a date/time field though, but I'm unsure how to do it.

This is the code in my form:

<label>Birthday</label>
<input type="hidden" name="fields[birthday][new1][type]" value="date">
<div id="birthday">
    <select name="fields[birthday][new1][fields][month]">
        <option selected="selected" value="">M</option>
        {% for i in 1..12 %}
            <option value="{{ i }}">{{ i }}</option>
        {% endfor %}
    </select>
    <select name="fields[birthday][new1][fields][day]">
    <option selected="selected" value="">D</option>
        {% for i in 1..31 %}
            <option value="{{ i }}">{{ i }}</option>
        {% endfor %}
    </select>
    <select name="fields[birthday][new1][fields][year]">
        <option selected="selected" value="">Year</option>
        {% set startYear = now.year - 15 %}
        {% set endYear = now.year - 110 %}
        {% for i in startYear..endYear %}
            <option value="{{ i }}">{{ i }}</option>
        {% endfor %}
    </select>
</div>

In this case, "birthday" is my matrix field handle and "date" is the block type handle. "month", "day", & "year" are obviously the field handles within the matrix field.

There's nothing in the docs. I understand a date/time field doesn't produce an object like a matrix field, but I can't think of a solution of how to convert it.

Answer 1

Ok, I figured it out. First, to solve the birthday input problem, I used javascript to gather the values of each individual date dropdown and assemble them into a hidden text input that would be what passes in the datetime value to Craft. No problem.

However, the datetime formatting tripped me up because there are two posts here that had the formatting differently.

The formatting needs to exactly match the example shown here on StraightUpCraft under the date row. So a date value like 2014-06-24 does not work; it needs to be 06/24/2014. Likewise, the time value of 23:30:00 does not work either; it needs to be 11:30 PM.

My final code looks like this after the javascript fills in the date value. Since it's a birthday, the 6pm time is just hardcoded in.

<input type="text" size="10" name="fields[birthday][date]" value="02/24/1985">
<input type="text" size="10" name="fields[birthday][time]" value="6:00 PM">

Extra note for those using localized sites: you need to submit the date and time exactly how Craft formats them for each localization. For example, "6/24/2016" would be the acceptable date format for the U.S., but it will need to be "24.6.2016" when submitted on the German version of that page. You can output the formats dynamically in Craft using the translations filter:

<input type="text" size="10" name="fields[fieldHandle][date]" value="{{ now|date('Date Input Format'|t) }}">
<input type="text" size="10" name="fields[fieldHandle][time]" value="{{ now|date('Time Input Format'|t) }}">

And then in your translations files put something like:

"Date Input Format" => "d.m.Y",
"Time Input Format" => "G:i",

etc

Answer 2

Based on this answer to a similar question, I think you can use a date field within your Matrix and set the value using the following date format: Y-m-d

Then you'd combine the three parts of the birthday (year, month, day format) into the value to be submitted. Do this via JS or you can use the HTML5 Date type (example) or some form of datepicker.

Note: Date type doesn't work with all browser so you'll need something like Modernizer, webshim and or jQuery/UI type fixes.

Here are a few places to learn more about how to use this with IE:

• https://stackoverflow.com/questions/22983013/how-to-get-html-5-input-type-date-working-in-firefox-and-or-ie-10
• http://pietschsoft.com/post/2010/11/18/html5-day-5-new-date-input-type
• https://github.com/chemerisuk/better-dateinput-polyfill
• http://www.wufoo.com/html5/types/4-date.html

Answer 3

I was using a date picker instead of a drop-down menu to capture submissions. Here is how I captured & formatted the date/time from the front-end to store as a dateTime field in the CP.

While not exactly the same, I think along with the answer @Natetronn provided and my example might help get the format correct.