Я использую bootstrap-datepicker, чтобы проверить дни, когда мой сайт получил продажи, и я хочу отображать или выделять даты, по крайней мере, одну продажу. Я могу передавать даты на JSON, а затем превращать их в массив Javascript, но я не знаю, как сделать datepicker для получения дат и выделить их.
Есть ли способ с помощью bootstrap-datepicker для этого?
вот еще один пример, чтобы выделить диапазон дат:
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';
}
});
Можете сделать трюк, хотя я не уверен.
Существует простой способ установить несколько дат в календаре начальной загрузки. Существует многоуровневое свойство, которое можно использовать для выбора. найдите рабочий код ниже.
$('.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 и свойства datepicker "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