I am trying to change the date format in the JQM UI Datepicker.

It's got an input which display's the dates as you change them.

I need it to display in dd/mm/yyyy format.

Can anyone help please?

UPDATE:

I'm trying this, but nothing's changing:

<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;

  });   
</script>

<script language="javascript">
    $(document).ready(function() {
        $.datepicker.formatDate('dd/mm/yyyy'); //ADDED HERE
        $("input[type='submit']").click(function(e) {
            e.preventDefault();
        });
    });

</script>

I am trying to change the date format in the JQM UI Datepicker.

It's got an input which display's the dates as you change them.

I need it to display in dd/mm/yyyy format.

Can anyone help please?

UPDATE:

I'm trying this, but nothing's changing:

<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;

  });   
</script>

<script language="javascript">
    $(document).ready(function() {
        $.datepicker.formatDate('dd/mm/yyyy'); //ADDED HERE
        $("input[type='submit']").click(function(e) {
            e.preventDefault();
        });
    });

</script>

• javascript
• jquery
• jquery-mobile

• You might be out of luck. Once the control has been created it doesn't seem to let you make changes - I have had a similar issue. stackoverflow./questions/5898535/… – Rob Commented May 26, 2011 at 19:19

2 Answers 2

Try this $.datepicker.formatDate('dd/mm/yyyy');

More reference here

Change the "jquery.ui.datepicker.mobile.js" file

add date format: dateFormat: "dd/mm/yy" Code shown below

//bind to pagecreate to automatically enhance date inputs   
    $( ".ui-page" ).live( "pagecreate", function(){     
        $( "input[type='date'], input[data-type='date']" ).each(function(){
            $(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
        }); 
    });