jQuery Datepicker Add Button & Autoclose： false problem

Question

我在datepicker.js定制工作，但这里有一些问题:你能告诉我我哪里做错了吗?

1. 我想添加一个额外的按钮(不是命名为"done"的按钮)但是另一个按钮"关闭"。在打开日历时(您可以单击输入以打开日历)关闭底部的日历(不做任何操作)。我在这个任务中遇到的问题是，它似乎是"beforeShow"中的一个函数按钮没有附加

2. 当日期选择日历打开时，我希望日历在选择日期时不会自动关闭。但是，我想通过单击"完成"手动关闭。按钮。我试过使用"autoclose: false"但. .不工作。所以，我强制控制css样式来显示none和block while..当点击一个日期后，"活动"类在第二次单击时不工作。

谢谢您的宝贵时间

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
$(function(){
$(".datepicker").datepicker({
dateFormat: 'yy. mm. dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
todayBtn: false, 
autoclose: true,
monthNames: ["1","2","3","4","5","6","7","8","9","10","11","12"],
defaultDate: new Date(),
minDate: "+1d",
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
firstDay:  0, 
showOtherMonths: false, 
beforeShow : function(){
let thisCalendar = $(this);
const btnWrap = thisCalendar.find('.ui-datepicker-buttonpane')
btnWrap.append('<span class="">button</span>')
}
})
.focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
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));
$("#ui-datepicker-div").css("display", "block")
$('.ui-datepicker-close').click(function() {
$("#ui-datepicker-div").css("display", "none")
});
})
$(".datepicker").datepicker("setDate", new Date());
}); 
</script>
<p>Date 1: <input id="datepicker1" class="datepicker" type="text" ></p>
<p>Date 2: <input id="datepicker2" class="datepicker" type="text" ></p>
<p>Date 3: <input id="datepicker3" class="datepicker" type="text" ></p>

Answer 1

根据如何在按钮面板中向jQuery日期拾取器添加按钮来考虑以下问题?

$(function() {
$(".datepicker").datepicker({
dateFormat: 'yy. mm. dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
todayBtn: false,
autoclose: true,
//monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
defaultDate: new Date(),
minDate: "+1d",
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
firstDay: 0,
showOtherMonths: false,
beforeShow: function(inp, inst) {
setTimeout(function() {
var btnWrap = $(inp)
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
btnWrap.append('<span class="">button</span>');
}, 1);
}
})
.focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
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));
$("#ui-datepicker-div").css("display", "block")
$('.ui-datepicker-close').click(function() {
$("#ui-datepicker-div").css("display", "none")
});
})
$(".datepicker").datepicker("setDate", new Date());
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<!--
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-->
<p>Date 1: <input id="datepicker1" class="datepicker" type="text"></p>
<p>Date 2: <input id="datepicker2" class="datepicker" type="text"></p>
<p>Date 3: <input id="datepicker3" class="datepicker" type="text"></p>