CODEWITHSUNDEEP
angularjsdatepicker
Arjun Singh
Arjun Singh

Reputation: 132

Show Color on Specific dates in datetime-picker AngularJs

I'm using bootstrap datetime-picker in angularjs

I need to show color on some specific dates i.e. on weekend and holiday dates

Here is my date picker option :-

$scope.dateOptions = {
            dateFormat: 'yyyy-MM-dd',
            maxDate: new Date(2020, 5, 22),
            minDate: new Date(),
            startingDay: 1,
            onChangeDate: countDays
        };

I'm getting list of holidays from database and weekends I'm able to identify.

How to show color to specific date?

I tried using some custom css but its applying on all the dates not to specific.

Thanks!

Upvotes: 1

Views: 1041

Answers (1)

Vishal Hasnani
Vishal Hasnani

Reputation: 728

Answering your question

How to show color to specific date?

Bootstrap datetime-picker for Angularjs Do provide an option to apply custom class.

Try this

   $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
      };

The function getDayClass can be implement like this 

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 '';
  }

Set the class for dates

  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'
    }
  ];

The date picker calls date picker options for every date at the time of initialization.

you can check the Plunker example.

Upvotes: 2

Related Questions