在日期时间选择器AngularJs中的特定日期显示颜色
Posted
技术标签:
【中文标题】在日期时间选择器AngularJs中的特定日期显示颜色【英文标题】:Show Color on Specific dates in datetime-picker AngularJs 【发布时间】:2019-07-17 10:34:39 【问题描述】:我在 angularjs 中使用引导程序 datetime-picker
我需要在某些特定日期显示颜色,即在周末和节假日日期
这是我的日期选择器选项:-
$scope.dateOptions =
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays
;
我正在从数据库中获取我能够识别的假期和周末列表。
如何在特定日期显示颜色?
我尝试使用一些自定义 css,但它适用于所有日期不具体。
谢谢!
【问题讨论】:
【参考方案1】:回答你的问题
如何在特定日期显示颜色?
Bootstrap datetime-picker 为 Angularjs 提供应用自定义类的选项。
试试这个
$scope.dateOptions =
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays,
customClass: getDayClass // fucntion having logic to select particular dates
;
getDayClass函数可以这样实现
function getDayClass(data)
var date = data.date,
mode = data.mode;
if (mode === 'day')
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++)
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay)
return $scope.events[i].status;
// check for weekend 0 for sun and 6 for sat
if(date.getDay() == 0 || date.getDay() == 6)
return 'full'; //return class to be applied
return '';
设置日期类
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date(tomorrow);
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
date: tomorrow,
status: 'full'
,
date: afterTomorrow,
status: 'partially'
];
日期选择器在初始化时为每个日期调用日期选择器选项。
您可以查看Plunker example。
【讨论】:
您好@Vishal 感谢您的回答。如果是周末,你能帮忙吗?以上是关于在日期时间选择器AngularJs中的特定日期显示颜色的主要内容,如果未能解决你的问题,请参考以下文章
如何为 Android 中的日期和时间选择器对话框设置的特定时间和日期设置通知
ng-readonly 不禁用 angularjs 中的日期选择器