Magento - How do I add a frontend date picker that returns DD/MM/YY instead of MM/DD/YY?

Question

In my form I have:

<?php echo $this->__('Date') ?>: 
<input type="text" name="cal_date" id="cal_date" value="" /> 
<img title="Select date" id="cal_date_trig" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN) . 'adminhtml/default/default/images/grid-cal.gif'; ?>"  class="v-middle"/>

This shows the calendar.

In the header I have:

<reference name="head">
        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
</reference>

This loads the js and css.

In the layout xml I have:

<block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>

This adds the calendar picker to the page when I include this in my template:

<?php echo $this->getChildHtml('html_calendar') ?>

I get no errors and the date picker works.

I have set the date format in the backend to dd/mm/yy with en_GB locale. However I am still getting US date formats. How can I get UK date formats?

Answer 1

You can place calendar on the form like this:

<input type="text" name="date_to" id="date_to" value="" /> 
<input type="text" name="date_from" id="date_from" value="" />

<script type="text/javascript">// <![CDATA[
Calendar.setup({
    inputField : 'date_from',
    ifFormat : '%m/%e/%y',
    button : 'date_from_trig',
    align : 'Bl',
    singleClick : true
});

Calendar.setup({
    inputField : 'date_to',
    ifFormat : '%m/%e/%y',
    button : 'date_to_trig',
    align : 'Bl',
    singleClick : true
});
// ]]></script>

Answer 2

You have to add:

 <block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"/>

in head refernce to get this working in 1.7