如何在jQuery UI DatePicker中改变日期格式
在这篇文章中,我们将学习jQuery中的Datepicker。jQuery是最快和最轻量级的JavaScript库,用于简化HTML/CSS文档,或者更准确地说,文档对象模型(DOM)和JavaScript之间的交互。
jQuery以其 “少写多做 “的格言而广为人知。”它的意思很简单,就是你只需要写几行代码就可以实现你的目标。
在许多表单中,你可以从日历中选择日期和年份。Datepicker是一个标准形式的输入字段,只需看到日历就可以选择日期和年份。它是在指定的覆盖层中的一个交互式日历。
当你点击日历中提到的任何日期,那么反馈将出现在输入文本上。
步骤:
语法 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>
输出:
语法 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>
输出: