jQuery Datepicker 是 jQuery UI 库中的一个组件,用于提供日期选择功能。通常情况下,它会显示完整的日历视图,包含月份、年份和日期。
要实现根据下拉值仅显示天数(即隐藏月份和年份导航),可以使用以下方法:
$(function() {
// 初始化下拉框
var daySelect = $('#daySelect');
for (var i = 1; i <= 31; i++) {
daySelect.append($('<option>', {value: i, text: i}));
}
// 初始化日期选择器,但先隐藏
$('#datepicker').datepicker({
showOn: 'none', // 不自动显示
dateFormat: 'dd', // 只显示天数
beforeShow: function(input, inst) {
// 隐藏月份和年份导航
inst.dpDiv.addClass('hide-month-year');
return {};
}
});
// 自定义CSS隐藏月份和年份导航
$('<style>').text(`
.hide-month-year .ui-datepicker-header,
.hide-month-year .ui-datepicker-title,
.hide-month-year .ui-datepicker-calendar th {
display: none !important;
}
.hide-month-year .ui-datepicker-calendar td a {
padding: 0.2em !important;
}
`).appendTo('head');
// 当下拉框值变化时
daySelect.change(function() {
var selectedDay = $(this).val();
if (selectedDay) {
// 设置日期选择器只显示该天数的日期
$('#datepicker').datepicker('setDate', new Date(2020, 0, selectedDay));
$('#datepicker').datepicker('show');
}
});
});
<select id="daySelect">
<option value="">选择天数</option>
</select>
<input type="text" id="datepicker" readonly>
dateFormat
为 'dd' 只显示天数如果只需要简单的天数选择,也可以考虑使用普通的 select 下拉框或自定义的滑动选择器,这样实现更简单且性能更好。
没有搜到相关的文章