Change color if date is weekend using javascript

check if date is weekend javascript
moment js check if date is weekend
javascript date
javascript get day of month
javascript date calculations
javascript getday
javascript check date
javascript date now

I have code to check weekend and recolor it.

$scope.today = data.getDate() + '/' + (data.getMonth()+1)+ '/' + data.getFullYear();
if($scope.today.getDay() == 6 || $scope.today.getDay() == 0){
    console.log($scope.today+' is Weekend');
    //change color here
    //something like
    //$scope.date.fontcolor("blue");
} 

HTML code

<td>{{today}}</td>

data is from datepicker. And got error

TypeError: $scope.today.getDay is not a function

First, you should use Date object.

$scope.today = new Date();
if($scope.today.getDay() == 6 || $scope.today.getDay() == 0){
    console.log($scope.today+' is Weekend');
}

Then you use Angularjs filter in your html so you can display the format that you want.

<td>{{ today | date:'dd/MM/yyyy }}</td>

Second, you can use a flag to check if it is today.

$scope.today = new Date();
if($scope.today.getDay() == 6 || $scope.today.getDay() == 0){
    console.log($scope.today+' is Weekend');
    $scope.isWeekend = true;
}
else {
    $scope.isWeekend = false;
}

Then you use this flag to control a class for coloring your font using ng-class.

<td ng-class="{'weekend': isWeekend}">{{ today | date:'dd/MM/yyyy }}</td>

To finish it, you create a CSS for "weekend" class to set the font color as you desire.

.weekend {
    color: blue;
}

JavaScript: Check whether a date is a weekend date, JavaScript exercises, practice and solution: Write a JavaScript function to test whether a date is a weekend. Perform your control logic (e.g. Determining what 'today' is) in your controller or in a shared service, then perform your DOM manipulations in a directive. Rather than setting the color to 'blue', identify the data's pertinent attribute then use css to determine what color that class is to receive. – K.

You first need to properly identify if your date is in a weekend, in order to know this you just need to check the day of the week for the specified date. getDay() will return a integer where 0 is Sunday and 6 is Saturday I mention the above because they are the relevant data in your case. Knowing this you could try

function isWeekend(date) {
    const day = date.getDay();

    return (day === 0) || (day === 6);
}

const date = new Date('2018-11-26 00:00');

const answer = isWeekend(date);

if (answer) {
    // Change color logic ...
}

Programming ASP.NET, If the date is both in the current month and is also a weekend day, then the Cell. background-color: White; f ont-family:Arial; width: 12%; "> <a href =" javascript  How can I change the background color of the rows 15 to 67 for if the cells or row 15 are the weekend days (in the second workbook)? The values shown on row 15 are dates from the calendar workbook formated as "d" so it only shows numbers.

var date = new Date();
var day = date.getDay()
if(day == 6 || day == 0) {
    document.getElementById("p1").classList.add("mystyle");
}
document.getElementById("p1").textContent = date;

JavaScript getDay() Method, Definition and Usage. The getDay() method returns the day of the week (from 0 to 6) for the specified date. Note: Sunday is 0, Monday is 1, and so on. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Check below code snippet. Demo with Jquery UI Date picker

Logic to get weekend

var myDate = new Date('2018-11-10');
if(myDate.getDay() == 6 || myDate.getDay() == 0)  console.log('--Weekend ', myDate);

$(document).ready(function(){
  $(function () {
    $("#date").datepicker({ dateFormat: 'yy-mm-dd' });
  });  
});


angular.module('myApp', [])
.controller('dateCtrl', function($scope) {
   $scope.isWeekend = false;
   $scope.checkWeekend = function(){
       $scope.myDate = new Date($scope.date);
       if($scope.myDate.getDay() == 6 || $scope.myDate.getDay() == 0) { 
          $scope.isWeekend = true;
          console.log('--Weekend ', $scope.date);
       }else {
          $scope.isWeekend = false;
       }
    };
 
})

.directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({  dateFormat: 'yy-mm-dd' });
        }
    };
});
.weekend {
  background: green;
}
<html>
<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="dateCtrl">

   DATE : <input type="text" datepicker ng-model="date" ng-change="checkWeekend()" />
  <span ng-class="{'weekend':  isWeekend }">{{date}}</span>
</div>
</div>
</body>
</html>

JavaScript switch Statement, The value of the expression is then compared with the values of each case in the structure. If there is a match, the associated block of code is executed. The switch​  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

JavaScript getDate() Method, More "Try it Yourself" examples below. Definition and Usage. The getDate() method returns the day of the month (from 1 to 31) for the specified date. Browser​  All of column C are the dates I update as needed. So my current sheet has all of column C with various dates. I need the cell to be red if the date is within 90 days of the current date. I need the cell to be yellow if the date is within 120 days the current date. I need the cell to be green if the date is beyond 150 days past the current date.

MySQL WEEKDAY() Function, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The background display in a table is from each table cell, not from the table itself. If you want to change the color, you need to change in each table cell (td), not from table tag.

New Perspectives on the Internet: Comprehensive, Use your browser to load the JavaScript Kit Free JavaScript page point average or loan payment) and others display content on the screen (such as a date, time, or animated buttons that change color or display a message when the user  Determine if date is a weekend with formula Easily filter and highlight all weekends in a date column with an amazing tool For example, you would like the specified cell to be populated with TRUE if the given date falls on a weekend, and populated with FALSE if the date does not belong to a weekend, the following formula will help you.

Comments
  • first problem: When you take the date parts then concat them with '/', the resultant is not a Date object, but a string. Strings do not have a "getDay()" function
  • second problem: you have control code and DOM manipulation colocated to the same block. This is more likely to cause confusion than prevent it. Perform your control logic (e.g. Determining what 'today' is) in your controller or in a shared service, then perform your DOM manipulations in a directive. Rather than setting the color to 'blue', identify the data's pertinent attribute then use css to determine what color that class is to receive.
  • This is perfectly fine, could you help me a little more. I would like to change different color depend on Sat/Sun. What should I change ng-class? isSunday and isSaturday: if($scope.today.getDay() == 0){ $scope.isSunday = true; } else if ($scope.today.getDay() == 6) { $scope.isSaturday = true; } else { $scope.isSaturday = false; }
  • @AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"