1

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.

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>
1
  • Thanks Derek. Perfect. And one of your other post answers helps out with the formatting. Cheers!
    – Lloyd Hill
    Feb 6 '13 at 19:21
0

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('');
    });
});

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.