jquery数据报警器添加按钮&自动关闭:假问题
jquery数据报警器添加按钮&自动关闭:假问题
提问于 2022-12-01 14:48:22
我正在进行datepicker.js定制，但这里有一些问题：(请您给我一个提示，我做错了什么？
当日历打开时，
- I想在底部添加一个额外的按钮(不是命名为"done“的按钮，而是另一个”关闭“按钮来关闭日历而不采取任何行动)(您可以单击input打开日历)。我在这个任务中遇到的问题是，似乎"beforeShow“中有一个函数不是working..button，而不是
- 当数据交换日历被打开时，我希望日历在选择日期时不会自动关闭。不过，我想手动关闭点击“完成”按钮。我试过用“自动关闭:假”但是..。不起作用。因此，我相当有力地控制css样式，使其不显示任何内容并在.单击一个日期后，“活动”类将不再适用于第二次单击.
。
谢谢您抽时间见我
<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>
回答 1
Stack Overflow用户
发布于 2022-12-01 17:39:07
考虑以下基于How do you add buttons to a jQuery datepicker in the button panel?的
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74643765
复制相关文章
相似问题
腾讯云开发者
