简体   繁体   中英

JQuery datepicker - change date format

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?

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">

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"
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM