在引导程序日期选择器上突出显示某些日期
Highlight certain dates on bootstrap-datepicker
我正在使用引导日期选择器来检查我的网站销售的日期，我想显示或突出显示至少有一次销售的日期。我可以在JSON上传递日期，然后将它们制作成Javascript的数组，但我不知道如何制作日期选择器来获取日期并突出显示它们。
有没有一种方法可以通过引导日期选择器来实现这一点？
这里是另一个突出显示日期范围的示例：
var inRange=false;
$('#elementPicker').datepicker({
beforeShowDay: function(date) {
dateFormat = date.getUTCFullYear() + '-' + date.getUTCMonth() + '-' + date.getUTCDate();
if (dateFormat == '2014-01-01') {
inRange = true; //to highlight a range of dates
return {classes: 'highlight', tooltip: 'Title'};
}
if (dateFormat == '2014-01-05') {
if (inRange) inRange = false; //to stop the highlight of dates ranges
return {classes: 'highlight', tooltip: 'Title'};
}
if (inRange) {
return {classes: 'highlight-range'}; //create a custom class in css with back color you want
}
}
});
$('#xxx').datepicker()
.on('onRender', function(ev){
if (ev.date.valueOf() == your date){
return 'highlight';
}
});
可能会成功，尽管我不确定。
有一种简单的方法可以在引导程序日历中设置多个日期。有一个属性multidate可用于选择。找到下面的工作代码。
$('.inline_date').datepicker({
multidate: true,
todayHighlight: true,
minDate: 0,
});
$('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])
只有一个问题，点击即删除突出显示。少了一个月的时间。如果你想要八月的日期，那么你必须用7而不是8。
我使用Knockout绑定和日期选择器属性"beforeShowDay"解决此问题的方法：
function MainFilters() {
var self = this;
self.notAppliedDates = ko.observableArray([]);
self.customDates = ko.observableArray(["14.06.2015", "20.06.2015", "26.06.2015", "10.06.2015", "29.06.2015"]);
}
ko.bindingHandlers.multiDatepicker = {
init: function (element, valueAccessor, allBindings) {
var customDates = allBindings.get("customDates");
valueAccessor()();
$(element).datepicker(
{
multidate: true,
language: "ru",
orientation: "top",
beforeShowDay: function (date) {
var d = ConvertDateTostring(date, "dd.mm.yyyy");
if ($.inArray(d, customDates()) != -1) {
return {
classes: 'activeClass'
};
}
return;
}
}
)
.bind(
'changeDate',
function (e) {
var res = e.dates;
var value = [];
res.sort(function (a, b) { return a - b });
for (var i in res) {
value.push(res[i].asString());
}
valueAccessor()(value);
}
);
},
update: function (element, valueAccessor, allBindings, bindingContext) {
}
};
function ConvertDateTostring(date, format) {
if (!date) {
return "";
}
if (format) {
return dateFormat(date, format);
}
return dateFormat(date, "dd.mm.yy");
} .activeClass{
background: #32cd32;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" id="dates" data-bind="customDates: customDates, multiDatepicker: notAppliedDates, value: selectedDatesString">使用datetimepicker事件显示、更新和更改需要突出显示日期。
这里的博客文章解释了如何使用Bootstrap Datetimepicker实现。
$('#datetimepicker').on('dp.show', function(e){
highlight()
})
$('#datetimepicker').on('dp.update', function(e){
highlight()
})
$('#datetimepicker').on('dp.change', function(e){
highlight()
})
function highlight(){
var dateToHilight = ["04/19/2019","04/20/2019","04/30/2019"];
var array = $("#datetimepicker").find(".day").toArray();
for(var i=0;i -1) {
array[i].style.color="#090";
array[i].style.fontWeight = "bold";
}
}
}
有关更多信息，请参阅博客
参考：
https://sourcecodezoneseven.blogspot.com/2019/04/here-is-code-function-hilight-var.html
我尝试了上面Matias的答案，但出现了飞行故障。在解决了一些问题并稍微修改了Matias的回答之后，我设法创建了一个可行的解决方案。
如果你把下面的代码粘贴到一个空白的.html文件中，那么你应该会看到一个带有日期小部件的输入框
开始日期(2021年8月8日(、结束日期(2021月26日(以及其间的日期应具有自己独特的配色方案。
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js" integrity="sha256-VBLiveTKyUZMEzJd6z2mhfxIqz3ZATCuVMawPZGzIfA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.StartDate{background-color: green;}
.InBetweenDates{background-color: darkred;}
.EndDate{background-color: blue;}
</style>
<p>Date: <input type="text" readonly="" id="elementPicker"></p>
<script>
var inRange=false;
$('#elementPicker').datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: new Date("01/01/2016"),
beforeShowDay: function(date){
console.log("date")
console.log(date)
dateFormat = date.getUTCFullYear() + '-' + date.getUTCMonth() + '-' + date.getUTCDate();
console.log("dateFormat")
console.log(dateFormat)
// 7 means August (0 means January)
// We are checking to see if the date is 8th August 2021
// Matias had if (dateFormat == '2014-01-01') but after looking at Console.Log,
// I removed the leading 0 from the day and month figure.
if (dateFormat == '2021-7-8') {
console.log("(dateFormat == '2021-7-8')")
inRange = true; //to highlight a range of dates
// If the day is 8th August 2021 (remember 7 means August not July)
// then we add the CSS class StartDate to the day (look at the top of the code for the StartDate CSS class styling).
return [true, 'StartDate', 'tooltipText'];
}
if (dateFormat == '2021-7-26') {
console.log("(dateFormat == '2021-7-26')")
inRange = false; //to stop the highlight of dates ranges
// If the day is 26th August 2021 (remember 7 means August not July)
// then we add the CSS class EndDate to the day (look at the top of the code for EndDate CSS class styling).
return [true, 'EndDate', 'tooltipText'];
}
if (inRange) {
// If the day is between 8th August 2021 - 26th August 2021 then we add the CSS class InBetweenDates to the day (look at the top of the code for the StartDate CSS class styling).
return [true, 'InBetweenDates', 'tooltipText'];
} else {
// I think this essentially means select the day, do nothing with it and then move on.
// Adding this in prevented the error message 'Uncaught TypeError: Cannot read property '0' of undefined jquery datepicker'.
return [true];
}
}
});
</script>
beforeShowDay: function (date) {
dateFormat = (date.getUTCDate()+1).toString().padStart(2, '0') + '-' + (date.getUTCMonth()+1).toString().padStart(2, '0') + '-' + date.getUTCFullYear(); //this will format the dates that appears when you toggle the datpicker to the fromat you want ok..
console.log(dateFormat);
if ($.inArray(dateFormat, unavailableDates) == -1) { //certain days if they don't exist in my array of dates i already created depending on my project
return {classes:'avail_days'}; //this will produce a class called full_days with the date it finds it inside the array (unavailableDates) and you have to style with css THAT avail_days class
}else {
return [true];
}
},
//感激；(
相关文章：
- 将时区格式的日期显示为UTC时间
- 如何根据所选日期显示警告
- JavaScript日期显示
- 如何使用 DHTMLX 甘特图扩展甘特图的日期显示
- 如何根据当前日期显示两周期间的第一天
- 日期选取器将今天的日期显示为默认值，并且仅适用于 GET
- 由于时区的原因，字符串的新日期显示为前一天
- 如何使用JavaScript将日期显示为DD/MM/YY格式
- fullCalendar.js:按选定日期显示事件
- javascript getDay(）为旧日期显示错误的日期
- 在JSON中按日期显示数组出现的次数
- 根据所选日期显示信息
- Jquery日期选择器所有日期显示为不可选择
- 从数据库中按日期显示日历上的事件
- Jqgrid中的日期显示休息1天
- 基于日期显示日期的Javascript
- CouchDB map/reduce函数按日期显示用户的有限结果
- JavaScript日期显示错误的日期和时间
- 我通过javascript突出显示的当前日期显示不正确
- 使用JavaScript进行查询，以便在HTML文档中按日期显示事件
