Open In App

How to Change Date Format in jQuery UI DatePicker ?

Last Updated : 07 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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=
        rel="stylesheet" />
    <script type="text/javascript" 
    </script>
    <script type="text/javascript" src=
    </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=
        rel="stylesheet" />
    <script type="text/javascript" 
    </script>
    <script type="text/javascript" 
    </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:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads