'How to change HTML datepicker format [duplicate]

I want to change html date format to mm-dd-yyyy from default HTML date format(dd-mm-yyyy).

Anyone help me to achieve this.

Note: I want achieve without adding jquery library files.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit">
</form>
javascripthtmljquerycss


Solution 1:[1]

Maybe a syntax error:

$("#birthday").datepicker({
  "dateFormat" : "mm-dd-yyyy" 
});

Solution 2:[2]

It is not a syntax error as others are posting here. I used the same syntax you had in your code and it works like a charm. I think you were missing probably a library.

By adding these two libraries

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>`

and

<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

it works fine. 

$("#birthday").datepicker({
  "dateFormat" : "mm-dd-yyyy" 
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<form action="#">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit">
</form>

Solution 3:[3]

You have SyntaxError: unexpected token: '{'" and Double Quote would not be used for "dateFormat", It should be dateFormat

Please correct Syntex in

Wrong [Used in your code]

   $("#birthday").datepicker() {
  "dateFormat" : "mm-dd-yyyy" 
});

Right

  $( "#birthday" ).datepicker({
        dateFormat: 'mm-dd-yy'
    });

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
        dateFormat: 'mm-dd-yy'
    })
  } );
  </script>
</head>
<body>
 
<p>Date: <input placeholder="mm-dd-yyyy" type="text" id="datepicker"></p>
 
 
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Diego De Vita
Solution 2 Oris Sin
Solution 3

Related Questions