极客教程jQuery UI日期选择器
jQuery UI的日期选择器是用来提供一个日历给用户从日历中选择日期。这个日期选择器通常连接到一个文本框，所以用户从日历上选择的日期可以转移到文本框中。
我们将为不同的库和样式使用CDN链接。为了显示任何jQuery UI小部件，我们必须使用jQuery和jQuery UI的链接。我们还将使用样式属性，为我们的日历使用主题Cupertino。你可以改变主题以符合你的风格要求。
<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’ rel=’stylesheet’>
例子1：这个例子显示一个日期选择器。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Date Picker
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" >
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" >
</script>
</head>
<body>
Date: <input type="text" id="my_date_picker">
<script>
(document).ready(function() {
(function() {
$( "#my_date_picker" ).datepicker();
});
})
</script>
</body>
</html>
输出:
选择的默认日期：在日历中默认选择今天的日期。然而，我们可以通过给默认日期赋值来改变默认日期。
示例 2:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI | Date Picker
</title>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/
ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" >
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" >
</script>
</head>
<body>
Date: <input type="text" id="my_date_picker">
<script>
(function() {
( "#my_date_picker" ).datepicker({
defaultDate:"09/22/2019"
});
});
</script>
</body>
</html>
输出:
管理日期格式。在显示日历的同时，我们可以管理日期格式。我们可以在脚本部分使用以下jQuery代码来获得结果。
<script>
(function() {
( "#my_date_picker" ).datepicker({
dateFormat: 'dd-mm-yy',
defaultDate:"24-09-2019"
});
});
</script>
管理工作日。默认情况下，一周的第一天是从周日开始显示的( firstDay=0 )。我们可以通过改变firstDay的值来改变起始日。
<script>
(function() {
( "#my_date_picker" ).datepicker({
firstDay:2 // Tuesday is first day
});
});
</script>
更新月和年。根据我们的要求，我们可以添加选项让用户选择月和年。
<script>
(function() {
( "#my_date_picker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
选择的最大和最小日期。我们可以通过指定一个最大和最小日期值来限制用户从日历中选择日期。
$(function() {
$( "#my_date_picker" ).datepicker({
maxDate:'+3d',
minDate: '-4d'
});
});
我们有两个日历，一个是选择开始日期，另一个是在日历中选择结束日期。它可以用于酒店预订，我们必须选择入住日期和退房日期。这种安排必须满足以下条件。
- 一旦选择了开始日期，结束日期就不能在开始日期之前。
- 一旦选择了结束日期，开始日期就不能在结束日期之后。
- 结束日期不能改到开始日期之前
- 开始日期不能改到结束日期之后。
- 在上述情况下，不能选择的日期应被禁止选择。
互锁的两个Datepickers
在使用两个互锁的日历之前，我们将学习如何设置最小可选日期和最大可选日期。
minDate。最小可选择的日期。 maxDate。最大可选择的日期。在上一篇关于DatePicker的文章的末尾有一个例子。这里又有了。
两个日历的交错排列
改变日历的功能。
我们将使用变化函数来触发事件。我们将为End Calendar设置minDate，只要Start Calendar的变化函数被触发。
同样地，当End Calendar的变化功能被触发时，我们将为Start Calendar设置maxDate。
getDate()
该方法返回日历中的选定日期。下面是一个例子
var my_date = $( "#my_calendar" ).datepicker( "getDate" );
我们将用它来获取用户选择的日期。
现在我们将给用户提供两个日历来选择开始日期和结束日期。
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<style>
.ui-datepicker {
width: 12em;
}
h1{
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
Start Date:
<input type="text" id="my_date_picker1">
End Date:
<input type="text" id="my_date_picker2">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
(function() {
("#my_date_picker1").datepicker({});
});
(function() {
("#my_date_picker2").datepicker({});
});
('#my_date_picker1').change(function() {
startDate = (this).datepicker('getDate');
("#my_date_picker2").datepicker("option", "minDate", startDate);
})
('#my_date_picker2').change(function() {
endDate =(this).datepicker('getDate');
$("#my_date_picker1").datepicker("option", "maxDate", endDate);
})
})
</script>
</center>
</body>
</html>
输出:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例，从基础开始学习jQuery。