在日期时间选择器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 中的日期选择器

AngularJS - 出现在模态后面的日期选择器

在 ASP .NET MVC 5.1/HTML 5 特定中显示日期时间选择器而不是日期选择器

如何在angularjs中获取每周明智的开始和结束日期