提问人：RMT 提问时间：5/9/2023 最后编辑：RMT 更新时间：5/10/2023 访问量：82
JQuery Month & Year Picker 在下拉列表或最后选定的月份和年份中带有自定义文本
JQuery Month & Year Picker with Custom Text in Dropdown or Last Selected Month & Year
问：
我有一个 JQuery 月份和年份选择器，我正在尝试使月份和年份的下拉列表显示通用文本或显示最后选择的月份和年份值。现在，它根据设置的范围显示最新的月份和日期。
我试过使用，但它不起作用，只接受日期值。我的代码如下：beforeShowdefaultDate
<!DOCTYPE html>
<html>
<head>
<title>Datepicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#ui-datepicker-div{
width: 20rem;
left: 632px;
}
.ui-datepicker-calendar {
display: none;
}
.datepicker{
margin-top: 1rem;
display: grid;
justify-items: center;
}
select > option{
background-color: rgb(212, 212, 212);
}
.ui-datepicker-prev{
background: white;
cursor: pointer;
}
.ui-datepicker-next{
background: white;
cursor: pointer;
}
.ui-datepicker .ui-datepicker-buttonpane button{
color: white;
background: black;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover{
color: white;
background: rgb(234, 176, 0);
}
.monthYearPicker{
font-size: 1.5rem;
height: 2rem;
width: 20rem;
}
.monthYearPara{
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<div class="datepicker">
<p class="monthYearPara">Pick Month & Year:</p>
<input readonly name="myDate" class="monthYearPicker" placeholder=" Date Picker " />
</div>
<!-- REQUIRED FOR MONTH & YEAR PICKER -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script>
$(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
minDate: new Date(2020, 0), // Year, Index of Month (Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec)
maxDate: new Date(2023, 3), // Year, Index of Month (Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec)
dateFormat: 'MM yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
</script>
</body>
</html>
由于某种原因，JSFiddle 无法正确加载它，但可以在此处查看工作副本： https://onecompiler.com/html/3z7zk6ang
编辑： 通过下拉列表，我打算更改突出显示字段的值：
答： 暂无答案
上一个：阻止周末和节假日/特殊日期
评论