JQuery mobile UI Date picker format

Question

I am using this JQuery plugin http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/ to have a calender on my app but the only problem is it is formatted as mm/dd/yyyy. I have done some research into how to change this but not had much luck so far.

I would like to have it formatted as dd/mm/yyyy instead. I have tried adding a few JavaScript functions to change it but so far not had any luck.

This is the HTML code for my calender:

  <form action="#" method="get">
     <div data-role="fieldcontain">
      <label for="date">Date Input:</label>
     <br>
      <input type="date" name="date" id="date" style="width: 50%;" />
     </div>     
    </form>

This is the JavaScript I have been trying to get the format to change but I haven't had much luck:

var date = $('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val();

So far this just changes the placeholder in the input bbox to dd/mm/yyyy and when a new date is selected on the calendar it doesnt change.

I would appreciate any help with this.

Can you provide a jsFiddle for this?

Gloria
– Gloria

2013-07-30 13:18:55 +00:00
Commented Jul 30, 2013 at 13:18 — Gloria
– Gloria, Commented Jul 30, 2013 at 13:18

Gajotres · Accepted Answer · 2013-07-30 13:21:20Z

Solution

Working example: http://jsfiddle.net/Gajotres/PMrDn/65/

Changed javascript:

/*
* jQuery Mobile Framework : temporary extension to port jQuery UI's datepicker for mobile
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {

    //cache previous datepicker ui method
    var prevDp = $.fn.datepicker;

    //rewrite datepicker
    $.fn.datepicker = function( options ){

        var dp = this;

        //call cached datepicker plugin
        prevDp.call( this, options );

        //extend with some dom manipulation to update the markup for jQM
        //call immediately
        function updateDatepicker(){
            $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
            $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
            $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
            $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
            $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
            $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
            $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); 
            $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
            $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
            $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
                var el = $(this);
                // remove extra button markup - necessary for date value to be interpreted correctly
                el.html( el.find( ".ui-btn-text" ).text() ); 
            });
        };

        //update now
        updateDatepicker();

        // and on click
        $( dp ).click( updateDatepicker );

        //return jqm obj 
        return this;
    };

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

Implementation

First don't include this file:

<script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>

Use javascript attached to this answer, basically it is same as a top link javascript just modified to work with newer version of jQuery plus your date format. If you want another date format just change it manually in this line:

$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true, dateFormat: 'dd-mm-yy' }) );

Just adding this in dateFormat: 'dd-mm-yy' worked perfectly, thank you so much.

Prince Kumar Sharma · Accepted Answer · 2013-07-30 14:28:38Z

1

Here is the Solution.

var date = $('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val();

you can also check the following link:

http://docs.jquery.com/UI/Datepicker#option-dateFormat

http://docs.jquery.com/UI/Datepicker/formatDate

edited Jul 30, 2013 at 14:28

Prince Kumar Sharma

12.6k4 gold badges62 silver badges90 bronze badges

answered Jul 30, 2013 at 13:24

Anand Jha

10.8k6 gold badges28 silver badges29 bronze badges

Collectives™ on Stack Overflow

JQuery mobile UI Date picker format

2 Answers 2

Solution

Implementation

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution

Implementation

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related