DatePicker 作为只读日历
DatePicker as a readonly calendar
我有一个应用程序,其中主要对象的字段具有多个日期间隔(在一个月内)。
我正在寻找用户友好的方式来显示日历上标记的这些数据,并为周末和节假日提供额外的颜色。
我设法以内联模式设置 Jquery.ui.DatePicker ..但我没有找到一种方法来为其提供不同的数据范围...为周末着色并标记特定日期,例如现在,和自定义假期。
$('.date-pick').datePicker({
inline:true,
language:'en',
dateFormat: 'dd-mm-yy',
});
我试过 setDate
..但找不到设置间隔和指定颜色或样式的方法。
您可以定位 jQuery UI 日期选择器添加的 类 来更改颜色。
周末:
.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {
color: Red;
}
jQuery UI 日期选择器上周末的标记如下所示:
<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;
}
我有一个应用程序,其中主要对象的字段具有多个日期间隔(在一个月内)。
我正在寻找用户友好的方式来显示日历上标记的这些数据,并为周末和节假日提供额外的颜色。
我设法以内联模式设置 Jquery.ui.DatePicker ..但我没有找到一种方法来为其提供不同的数据范围...为周末着色并标记特定日期,例如现在,和自定义假期。
$('.date-pick').datePicker({
inline:true,
language:'en',
dateFormat: 'dd-mm-yy',
});
我试过 setDate
..但找不到设置间隔和指定颜色或样式的方法。
您可以定位 jQuery UI 日期选择器添加的 类 来更改颜色。
周末:
.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {
color: Red;
}
jQuery UI 日期选择器上周末的标记如下所示:
<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;
}