因此，我尝试按照JQuery的范围选项日期选择器中给出的示例进行操作，如下所示：https://jqueryui.com/datepicker/#date-范围(如果页面发生变化，我会在下面发布代码。(
我试图做的是格式化输入字段；MM yy"；。但是，当我更改行var dateFormat = "MM yy",或在日期选择器部分添加formatDate: "MM yy"时，日期选择器允许"到"字段选择"开始"日期之前的日期。从本质上讲，我想做的是创建一个远程月份选择器。
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>
好吧，经过更多的挖掘，我得到了答案(Java/Springboot/Thy:
<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 id="fromDate" type="text" th:field="*{fromDate}" autocomplete="off"
class="form-control ui-monthpicker col-6"
aria-label="from-date" aria-describedby="from-date"/>
</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 id="toDate" type="text" th:field="*{toDate}" autocomplete="off"
class="form-control ui-monthpicker col-6"
aria-label="to-date" aria-describedby="to-date"/>
</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',
showButtonPanel: true,
beforeShow: function() {
if ((selDate = $(this).val()).length > 0)
{
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
$(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
}
},
onClose: function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
// If they don't like the long month format, change the line below to 'M yy'
$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
if ($(this).attr("id") == "fromDate") {
let fromDate = $("#fromDate").val();
let start = fromDate.split(' ');
$('#toDate').datepicker("option", "minDate", new Date(start[1], monthNumber[start[0]]));
}
}
});
$('.ui-monthpicker').datepicker("option", "minDate", new Date(2006, 6));
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>