我通过使用 jquery-ui datepicker 制作了一个内联日历，我也在其中使用了 multiDatePicker。但是在单击某个特定按钮时，我希望分配到 multiDatePicker 中的所有日期都将被删除，并且只有单击的日期才会显示为选中。
我的代码是这样的:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui.multidatespicker.js"></script>
<script>
$(function() {
var today = new Date();
var yesterday = (new Date()).setDate(today.getDate()-1);
var tomorrow = (new Date()).setDate(today.getDate()+1);
var dayAfttomorrow = (new Date()).setDate(today.getDate()+2);
var dayDayAfttomorrow = (new Date()).setDate(today.getDate()+3);
var dates = [yesterday, today, tomorrow, dayAfttomorrow, dayDayAfttomorrow];
$('#calender').multiDatesPicker({
disabled: false,
addDates: dates
});
$( "#calender" ).datepicker({
changeYear: true,
changeMonth: true,
onSelect: function(dateStr) {
// $('#calender').multiDatesPicker('resetDates', true);
var date = $(this).datepicker('getDate');
alert(date);
}
});
});
</script>
<style type="text/css">
/*.ui-state-highlight,*/ .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid green !important;
/*background: green;*/
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 1px solid #d3d3d3 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: none !important;
}
/*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: green;
}*/
</style>
</head>
<body>
<!-- HTML -->
<div id="calender"></div>
</body>
</html>
这里我无法在 onSelect 中获得警报？谁能帮我解决这个问题......
最佳答案
您只需将 onSelect 传递给 multiDatesPicker
$(function() {
var today = new Date();
var yesterday = (new Date()).setDate(today.getDate() - 1);
var tomorrow = (new Date()).setDate(today.getDate() + 1);
var dayAfttomorrow = (new Date()).setDate(today.getDate() + 2);
var dayDayAfttomorrow = (new Date()).setDate(today.getDate() + 3);
var dates = [yesterday, today, tomorrow, dayAfttomorrow, dayDayAfttomorrow];
$('#calender').multiDatesPicker({
addDates: dates,
onSelect: function(dateStr) {
// $('#calender').multiDatesPicker('resetDates', true);
var date = $(this).datepicker('getDate');
$('#calender').multiDatesPicker('resetDates').multiDatesPicker('addDates', [date]);
console.log($('#calender').multiDatesPicker('getDates'))
}
});
});/*.ui-state-highlight,*/
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid green !important;
/*background: green;*/
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #d3d3d3 !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: none !important;
}
/*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: green;
}*/<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<div id="calender"></div>关于javascript - datepicker OnSelect 不工作，当它有 multidatepicker，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35742962/