SAEF + Matrix + Date_field + custom layout, datepicker not displaying

Question

I have a Matrix with a field called end_date and its cell type set to Date.
When the Matrix field is placed inside the following Safecracker form, the end_date datepicker displays correctly in the table cell.

CODE_1

{exp:safecracker channel="browse" return="some/path/URL_TITLE" url_title="{segment_3}" require_entry="yes"} 
    {field:my_matrix_field_name} 
{/exp:safecracker}

However, I want to customise the layout, so have instead used this [post][1] to create:

CODE_2

{exp:safecracker channel="browse" return="some/path/URL_TITLE" url_title="{segment_3}" require_entry="yes"} 
    {my_matrix_field_name}
        <input type="hidden" name="my_matrix_field_name[row_order][]" value="row_id_{row_id}" />
        <input type="text" name="my_matrix_field_name[row_id_{row_id}][col_id_1]" value="{end_date}">
    {/my_matrix_field_name}
{/exp:safecracker}

Issue with CODE 2: The data for the end_date field displays, BUT the datepicker does not display for the field. It just displays the default input field.

Simple question: Should the datepicker display by default?
Possible solution: Or do I need to use Stash to changer the parse order, as per this [post][2]?

I am using EE 2.5.2 and Matrix 2.5.3.

I have read every post I can find over the last 24hrs looking for a solution.

Answer 1

Since you're not using the Matrix fieldtype's internal display method, you'll need to manually call the datepicker on that input (otherwsie it's just a plain text field).

Target it with a class name or id, then apply some jQuery to it. You'll also need to format the existing field value if you're displaying your form as an edit form (otherwise it will show up in the field as as UNIX timestamp).

<input type="text" class="my-date-field" name="my_matrix_field_name[row_id_{row_id}][col_id_1]" value="{end_date format="%Y-%m%-d %g:% %A"}">

<script>
$(document).ready(function()
{
    var date = new Date(),
    hours = date.getHours(),
    minutes = date.getMinutes();

    if (minutes < 10) minutes = '0'+minutes;

    if (hours > 11) {
        hours = hours - 12;
        var meridiem = " PM";
    } else {
        var meridiem = " AM";
    }

    var time = " \'"+hours+':'+minutes+meridiem+"\'";

    $('.my-date-field').datepicker({
        constrainInput: false,
        dateFormat: $.datepicker.W3C + time
    });
});
</script>

Answer 2

Further to Dereks answer and just to wrap things up, here is the code I've used that includes altFormat and altField. It allows datepicker to display without the time in the field, but still pass the date + time in the required format back to EE.

  
<input type="text" value="{end_date format="%Y-%m-%d"}" id="my_datepicker_date">
<input type="text" name="my_matrix_field_name[row_id_{row_id}][col_id_1]" value="{end_date format="%Y-%m-%d %g:%h %A"}" id="stored_date">

$(document).ready(function()
{
    var date = new Date(),
    hours = date.getHours(),
    minutes = date.getMinutes();

    if (minutes  11) {
        hours = hours - 12;
        var meridiem = " PM";
    } else {
        var meridiem = " AM";
    }

    var time = " \'"+hours+':'+minutes+meridiem+"\'";

   $('#my_datepicker_date').datepicker({
        constrainInput: false,
        dateFormat: 'yy-mm-dd',
        altField: "#stored_date",
        altFormat: $.datepicker.W3C + time
    });

    $('#my_datepicker_date').change(function () {
        var $value = $(this).val();
        if ($value == '') $("#stored_date").val('');
    });
});