JQuery datepicker - change date format

Question

I want to change date format in JQuery datepicker (http://demos.jquerymobile.com/1.4.5/datepicker/)

Using function dateFormat - http://api.jqueryui.com/datepicker/#option-dateFormat.

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
        <script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
        <script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
        <script>
            $("#date").datepicker({
                dateFormat: "dd.mm.yy"
              });
        </script>
    </head>
    <body>
        <input data-role="date" type="text">
    </body>
</html>

Why it does not work?

Please define not work

The_Black_Smurf
– The_Black_Smurf

2016-02-21 18:48:04 +00:00
Commented Feb 21, 2016 at 18:48 — The_Black_Smurf
– The_Black_Smurf, Commented Feb 21, 2016 at 18:48
Date format did not change.

user4362081
– user4362081

2016-02-21 18:56:52 +00:00
Commented Feb 21, 2016 at 18:56 — user4362081
– user4362081, Commented Feb 21, 2016 at 18:56
please check my answer @user4362081

Lal
– Lal

2016-02-21 18:57:16 +00:00
Commented Feb 21, 2016 at 18:57 — Lal
– Lal, Commented Feb 21, 2016 at 18:57

Lal · Accepted Answer · 2016-02-21 18:59:19Z

2

See this fiddle

You are missing id attribute for your input. Since you are initialising your datepicker as $("#date").datepicker(), you have to specify an id as date to your `input. You are using the ID Selector here.

Please take a look at the jQuery selectors in the docs.

HTML

<input data-role="date" type="text" id="date">

JS

$("#date").datepicker({
  dateFormat: "dd.mm.yy"
});

UPDATE

Since you are loading your <script> in the <head>, you will have to use $( document ).ready(). Here is an updated fiddle. Thus , the updated JS would be as below

$( document ).ready(function() {
    $("#date").datepicker({
       dateFormat: "dd.mm.yy"
    });
});

edited Feb 21, 2016 at 18:59

answered Feb 21, 2016 at 18:52

Lal

14.9k4 gold badges50 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt · Accepted Answer · 2016-02-21 18:49:26Z

2

You need to wrap your block with a document.ready check, otherwise, it will execute before the dom exists and do nothing.

$( document ).ready(function() {
    $("#date").datepicker({
       dateFormat: "dd.mm.yy"
    });
});

You also need to add an id on your input:

<input data-role="date" type="text" id="date">

answered Feb 21, 2016 at 18:49

Matt

5,4381 gold badge34 silver badges59 bronze badges

2 Comments

user4362081 Over a year ago

That work but calendar did not display rightly, see image: i.sstatic.net/EhB5U.png

Matt Over a year ago

I would turn that into a new question since your original question is solved.

Collectives™ on Stack Overflow

JQuery datepicker - change date format

2 Answers 2

See this fiddle

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

See this fiddle

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related