How to Change Date Format in jQuery UI DatePicker ?

10 Nov, 2021
In this article, we are going to learn about the Datepicker in jQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.
jQuery is widely famous for its motto of “Write less, do more.” It simply means that you can achieve your goal by just writing a few lines of code.
In many forms, you can select the date and year from the calendar. Datepicker is a standard form of the input field that is used to select the date and year by just seeing the calendar. It is an interactive calendar in a specified overlay.
When you click on any date that is mentioned in the calendar then the feedback will appear on the input text.
 
Approach:
Create an HTML file and import the jQuery library.
The  jQuery datepicker() method is used to create an overlay of an interactive calendar.
Apply CSS to your application as per the need.
Syntax 1:
<script type="text/javascript">
    $(function() {
        $("#txtDate").datepicker({ 
            dateFormat: 'dd/mm/yy' 
        });
    });
</script>
Example:
HTML
<!DOCTYPE html><html>  <head>    <title>        jQuery UI datepicker format dd/mm/yyyy    </title>    <link type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"        rel="stylesheet" />    <script type="text/javascript"         src="https://code.jquery.com/jquery-1.12.4.js">    </script>    <script type="text/javascript" src=        "https://code.jquery.com/ui/1.12.1/jquery-ui.js">    </script>      <style type="text/css">        .ui-datepicker {            font-size: 8pt !important        }          body {            text-align: center;            background-color: lightgray;        }    </style></head>  <body>    <h2 style="color:green">        GeeksforGeeks    </h2>          <form id="form1" runat="server">        <div class="demo">            <b>Date:</b> <input type=""                 name="" id="txtDate" runat="server" />        </div>          <script type="text/javascript">            $(function () {                $("#txtDate").datepicker({                     dateFormat: 'dd/mm/yy'                 });            });        </script>    </form></body>  </html>
Output:
Syntax 2:
<script type="text/javascript">
    $(function() {
        $("#txtDate").datepicker({ 
            dateFormat: 'yy/mm/dd' 
        });
    });
</script>
Example:
HTML
<!DOCTYPE html><html>  <head>    <title>        jQuery ui datepicker format dd/mm/yyyy    </title>    <link type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"        rel="stylesheet" />    <script type="text/javascript"         src="https://code.jquery.com/jquery-1.12.4.js">    </script>    <script type="text/javascript"         src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">    </script>      <style type="text/css">        .ui-datepicker {            font-size: 8pt !important        }          body {            text-align: center;            background-color: lightgray;        }    </style></head>  <body>    <h2 style="color:green">        GeeksforGeeks    </h2>          <form id="form1" runat="server">        <div class="demo">            <b>Date:</b> <input type=""                 name="" id="txtDate" runat="server" />        </div>          <script type="text/javascript">            $(function () {                $("#txtDate").datepicker({                     dateFormat: 'yy/mm/dd'                 });            });        </script>    </form></body>  </html>
Output:
jQuery-Questions
jQuery-UI
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
jQuery | children() with Examples
How to get the value in an input text box using jQuery ?
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to redirect to a particular section of a page using HTML or jQuery?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?