Question

我有检查周末并重新着色的代码。

$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代码

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

数据来自日期选择器。并出现错误

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

Answer 1

首先，您需要正确地确定您的日期是否在周末，为了知道这一点，您只需要检查指定日期的星期几即可。 getDay()将返回一个整数，其中0是星期日，6是星期六。我上面提到的是因为它们是与您有关的数据。知道这一点，您可以尝试

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 ...
}

Answer 2

首先，您应该使用Date对象。

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

然后，您在HTML中使用Angularjs filter，以便显示所需的格式。

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

第二，您可以使用标志来检查是否今天。

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

然后，您可以使用此标志来控制使用ng-class为字体着色的类。

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

要完成此操作，请为“周末”类创建CSS，以根据需要设置字体颜色。

.weekend {
    color: blue;
}

Answer 3

检查以下代码段。使用Jquery UI日期选择器进行演示

获得周末的逻辑

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更改颜色

4 个答案: