【发布时间】：2021-09-23 15:59:16
【问题描述】：
所以，我正在尝试按照 JQuery 的 datepicker 中给出的示例进行范围选项，如下所示：https://jqueryui.com/datepicker/#date-range（如果页面发生更改，我将在下面发布代码。）
我要做的是格式化输入字段，使其显示“MM yy”。但是，当我更改行 var dateFormat = "MM yy", 或在 datepicker 部分添加 formatDate: "MM yy" 时，日期选择器允许 To 字段选择 From 日期之前的日期。本质上，我要做的是创建一个范围广泛的月份选择器。
Jquery 的范围选择器示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
</body>
</html>
我真的很接近我想要的以下内容。最后一个问题是我不能隐藏日历，所以用户只能选择月份和年份。但如果没有答案，我可以忍受。
<div class="input-group row mb-3">
<div class="col-6 text-right">
<label class="pr-3 font-weight-bold" for="fromDate">Start Date:</label>
</div>
<div class="col-6">
<input type="text" name="fromDate" id="fromDate" autocomplete="off"
class="form-control ui-monthpicker col-6" aria-label="from-date"
aria-describedby="from-date" data-date-format="mm-yyyy"/>
</div>
</div>
<div class="input-group row mb-3">
<div class="col-6 text-right">
<label class="pr-3 font-weight-bold" for="toDate">End Date:</label>
</div>
<div class="col-6">
<input type="text" name="toDate" id="toDate" autocomplete="off"
class="form-control ui-monthpicker col-6" aria-label="to-date"
aria-describedby="to-date" data-date-format="mm-yyyy"/>
</div>
</div>
<script>
let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December"];
var monthNumber = {}
for (var i = 0; i < monthNames.length; ++i) {
monthNumber[monthNames[i]] = i;
}
$(document).ready(function () {
$('.ui-monthpicker').datepicker({
changeMonth: true,
changeYear: true,
maxDate: "+0D",
dateFormat: 'MM yy'
});
$('#fromDate').datepicker('option', 'onClose', function (datePicker) {
$(this).val(datePicker);
let start = datePicker.split(' ');
$('#toDate').datepicker("option", "minDate", new Date(start[1], monthNumber[start[0]]));
});
});
</script>
【问题讨论】：
标签： jquery datepicker