Question

我有应用程序，其中主对象具有多个日期间隔的字段（在一个月内）。

我正在寻找用户友好的方式来显示日历上标记的这些数据，并为周末和假日提供额外的颜色。

我设法以内联模式设置Jquery.ui.DatePicker ..但我找不到一种方法来为它提供不同的数据范围...为周末着色并标记特定日期，如现在，和自定义假期。

$('.date-pick').datePicker({
   inline:true,
   language:'en',
   dateFormat: 'dd-mm-yy',
});

我尝试setDate ..但找不到设置间隔的方法，并指定颜色或样式。

Answer 1

您可以定位jQuery UI Datepicker添加的类以更改颜色。

周末：

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default { 
    color: Red; 
}

jQuery UI Datepicker周末的标记如下所示：

<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="0" data-year="2015">
    <a class="ui-state-default" href="#">#DAYNUMBER</a>
</td>

对于特定日期和日期范围：

<强> JS

var SelectedDates = {};
SelectedDates[new Date("January 11, 2015")] = new Date("January 11, 2015");
SelectedDates[new Date("January 30, 2015")] = new Date("January 30, 2015");

var startDate = new Date("January 14, 2015");
var endDate = new Date("January 21, 2015");

$("input").datepicker({
   inline:true,
   language:'en',
   dateFormat: 'dd-mm-yy',
   beforeShowDay: function(date) {
        var holiday = SelectedDates[date];
        if (holiday) {
            return [true, "holiday", holiday];
        }
        else if (date >= startDate && date <= endDate) {
            return [true, 'holiday-range', holiday];
        }
        else {
            return [true, '', ''];
        }
    }
});

<强> CSS

.holiday a.ui-state-default {
   background-color: Green;
   background-image: none;
   color: White;
}

.holiday-range a.ui-state-default {
   background-color: Purple;
   background-image: none;
   color: White;
}

DEMO

参考文献：
show weekend
highlight specific dates

DatePicker作为只读日历

1 个答案: