1

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.

3
  • 1
    This shows the format a front-end date/time field needs to be in. Does that help? craftcms.stackexchange.com/a/13601/57
    – Brad Bell
    Feb 25, 2016 at 17:44
  • Right, that link was more to show how I manipulated the data so it would get stored in the correct format.
    – Damon
    Mar 1, 2016 at 19:59
  • @BradBell thanks for that link. Ben Parizek's formatting worked for me.
    – Ryan
    Mar 2, 2016 at 12:24

3 Answers 3

2

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

1

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:

2
  • Thanks! I'm familiar with modernizer. However, based on the current situation, I think I'll just write some js to put the dropdown values into the proper format and pass them in via a hidden input. I think a datepicker is not ideal for birthdays because the date in the datepicker's popup is the current day and month, which causes a lot of editing on the user's part.
    – Ryan
    Mar 1, 2016 at 12:06
  • The formatting in your answer thread didn't work for me. Instead of Y-m-d, it had to be m/d/Y
    – Ryan
    Mar 2, 2016 at 12:26
1

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.

1
  • I appreciate this, but a datepicker is not ideal UI for choosing a birthday because you will start on the current month of the current year.
    – Ryan
    Mar 1, 2016 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.