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:

<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 name="fields[birthday][new1][fields][day]">
    <option selected="selected" value="">D</option>
        {% for i in 1..31 %}
            <option value="{{ i }}">{{ i }}</option>
        {% endfor %}
    <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 %}

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.

  • 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 '16 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 '16 at 19:59
  • @BradBell thanks for that link. Ben Parizek's formatting worked for me. – Ryan Mar 2 '16 at 12:24

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",



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:

  • 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 '16 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 '16 at 12:26

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.

  • 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 '16 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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