How to change HTML datepicker format

Question

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>

https://api.jqueryui.com/datepicker/#option-dateFormat (maybe) — Diego D, Apr 06 '22 at 09:58

score 0 · Answer 1 · answered Apr 06 '22 at 09:57

0

Maybe a syntax error:

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

answered Apr 06 '22 at 09:57

Diego D

6,156
2
17
30

Not helpful.... – Saravana Apr 06 '22 at 10:29
I updated the runtime of your snippet and now that you corrected it, it works as you wished it to work. So I'm confused why you say it wasn't helpful – Diego D Apr 06 '22 at 10:37
the format you did its a correction of my code. But I don't want to use any libraries – Saravana Apr 06 '22 at 10:38
you didn't say that in your question when I could read it. So you changed it. By the way now your question became how to do a datepicker without using a library. Good luck with that because it's impossible unless you write your own. – Diego D Apr 06 '22 at 10:39
Yes it was my mistake only. I just updated my requirement. – Saravana Apr 06 '22 at 10:41

Priya jain · Answer 2 · 2022-04-06T10:33:58.753

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>

Placeholder should display as mm-dd-yyyy. This one also not helpful. — Saravana, Apr 06 '22 at 10:30
I am adding a placeholder too. But your issue was not about placeholder — Priya jain, Apr 06 '22 at 10:32

score 0 · Answer 3 · answered Apr 06 '22 at 10:25

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>

yes it was a syntax error before it was corrected after watching my answer.. and now the snippet works having the right placeholder and formatting the picked date as mm/dd/yyyy — Diego D, Apr 06 '22 at 10:38
There are two datepicker in your answer. and also the format wrong. — Saravana, Apr 06 '22 at 10:44

How to change HTML datepicker format

3 Answers3