jquery - 使用 Jquery UI 日期选择器突出显示特定日期
问题描述
我有以下 Jquery ui datepicker 设置。我想突出显示未来的特定日期,怎么做?
我已经禁用了周末,因此使用beforeShowDay
.
$('#mypicker').datepicker({
//options
minDate: now,
firstDay: 0,
format: "yyyy.mm.dd",
onSelect: function(dateText, inst) {
$('.new_ship_date').val(dateText);
},
beforeShowDay: $.datepicker.noWeekends,
});
这是另一个问题的答案,但我不知道如何将它与禁用周末功能结合起来。
var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.
$('#whatever').datepicker({
beforeShowDay: function(date) {
// check if date is in your array of dates
if($.inArray(date, your_dates)) {
// if it is return the following.
return [true, 'css-class-to-highlight', 'tooltip text'];
} else {
// default
return [true, '', ''];
}
}
});
解决方案
要将$.datepicker.noWeekends
函数组合到您的逻辑中以根据数组中的日期突出显示单元格,您可以noWeekends()
单独调用该函数以确定日期是否为周末。然后,您可以在检查中使用该值来查看日期是否与数组中的一个匹配,并在数组的第一个元素中返回周末标志。
尝试这个:
let now = new Date();
// just for testing:
let addDays = (date, days) => {
let newDate = new Date(date);
newDate.setDate(date.getDate() + days);
return new Date(newDate.toDateString());
}
// map() is used here to store dates as epochs to make comparison easier later on
var highlightDates = [addDays(now, 1), addDays(now, 2), addDays(now, 3)].map(Number);
$('#mypicker').datepicker({
minDate: now,
firstDay: 0,
format: "yyyy.mm.dd",
onSelect: function(dateText, inst) {
$('.new_ship_date').val(dateText);
},
beforeShowDay: function(date) {
let isWeekday = $.datepicker.noWeekends(date)[0];
if (highlightDates.indexOf(+date) != -1) {
return [isWeekday, 'highlight', 'tooltip text'];
} else {
return [isWeekday, '', ''];
}
}
});
.highlight a.ui-state-default {
background-color: #C00;
color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<input type="text" id="mypicker" />
推荐阅读
- jquery - 找到左偏移大于的第一个元素
- javascript - 如何在 Angular 打字稿中使用 Timetable.js?
- javascript - 事件侦听器未在 Chrome 中运行
- php - 自定义帖子类型和 API REST 不起作用
- python - 使用 SQLAlchemy 计算结果集中包含的值的实例
- r - 为什么当我使用 dplyr 过滤时只打印部分数据?
- c# - 稍微复杂的网页文本到变量解析
- svg - 带有两个文本元素的 SVG。当一个因 textLength 而调整大小时 - 如何将另一个调整为相同的字符大小
- javascript - const {children} = this.props vs const children = this.props.children
- angular - Angular - 无法使用 http 服务拦截 http 请求