Date input field formatting problem in channel form

Question

# Goal

Display multiple entries using {exp:channel:entries} and within each entry use a {exp:channel:form} to allow editing the entry’s content.

# Problem

Using this method, I’m able to display and edit entry select fields and checkboxes but a custom field using the native date type does not work.

For example, if an entry’s custom date field contains the value 2013-11-29 12:00 AM, the corresponding date input field in my channel form has the value: ‘1385704800’

Additionally, clicking the date input field does not display the date picker.

This problem only arises when a channel form is wrapped in a channel entries tag. Creating a new entry with the channel form by itself works fine.

I’m running 2.7.2.

Edit: Here's the simplified template code:

{exp:channel:entries channel="projects" disable="pagination|categories|member_data" status="Open"}
    {exp:channel:form channel="projects" return="graphics/manager" entry_id="{entry_id}" json="yes" id="publishForm{entry_id}" include_jquery="no" preserve_checkboxes="yes" disable="categories|member_data"}
        {cf-form-proj-due format='%M. %d'} <!-- This works -->
        <input type="text" name="cf-form-proj-due" id="cf-form-proj-due" value="{cf-form-proj-due}"> <!-- This does not work -->
    {/exp:channel:form}
{/exp:channel:entries}

Answer 1

I believe what might be happening is that the JavaScript for the datepicker is being added to the page multiple times, by each loop through the channel entries tag.

There is a parameter for the channel form tag include_assets="no" which will prevent it from adding the Javascript, so perhaps you could use that with a conditional to only output the assets on the first entry. Adjust your code like this:

{exp:channel:entries channel="projects" disable="pagination|categories|member_data" status="Open"}
    {exp:channel:form channel="projects" return="graphics/manager" entry_id="{entry_id}" json="yes" id="publishForm{entry_id}" include_jquery="no" preserve_checkboxes="yes" disable="categories|member_data" {if count > 1}include_assets="no"{/if} }
        {cf-form-proj-due format='%M. %d'} <!-- This works -->
        <input type="text" name="cf-form-proj-due" id="cf-form-proj-due" value="{cf-form-proj-due}"> <!-- This does not work -->
    {/exp:channel:form}
{/exp:channel:entries}

Answer 2

You can use datepicker = "no" in your exp:channel:form tag and add a jquery:

$('#start_date').datepicker({changeYear: true, changeMonth: true, yearRange:'today.getFullYear():2020',dateFormat:'dd-mm-yy'});