如何在jQuery UI DatePicker中改变日期格式

在这篇文章中，我们将学习jQuery中的Datepicker。jQuery是最快和最轻量级的JavaScript库，用于简化HTML/CSS文档，或者更准确地说，文档对象模型（DOM）和JavaScript之间的交互。

jQuery以其 “少写多做 “的格言而广为人知。”它的意思很简单，就是你只需要写几行代码就可以实现你的目标。

在许多表单中，你可以从日历中选择日期和年份。Datepicker是一个标准形式的输入字段，只需看到日历就可以选择日期和年份。它是在指定的覆盖层中的一个交互式日历。

当你点击日历中提到的任何日期，那么反馈将出现在输入文本上。

步骤:

创建一个HTML文件并导入jQuery库。
jQuery datepicker()方法是用来创建一个交互式日历的叠加。
根据需要在你的应用程序中应用CSS。

语法 1:

<script type="text/javascript">
    (function() {("#txtDate").datepicker({ 
            dateFormat: 'dd/mm/yy' 
        });
    });
</script>

示例:

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

输出:

如何在jQuery UI DatePicker中改变日期格式？

语法 2:

<script type="text/javascript">
    (function() {("#txtDate").datepicker({ 
            dateFormat: 'yy/mm/dd' 
        });
    });
</script>

示例:

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