Изменить цвет, если дата выходного дня, используя JavaScript - PullRequest
Новая
       8

Изменить цвет, если дата выходного дня, используя JavaScript

0 голосов
/ 22 ноября 2018

У меня есть код, чтобы проверить выходные и перекрасить его. 

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

данные взяты из DatePicker.И получил ошибку 

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

Ответы [ 4 ]

0 голосов
/ 22 ноября 2018

Проверьте ниже фрагмент кода.Демонстрация с 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>
0 голосов
/ 22 ноября 2018

Сначала вы должны использовать объект Date. 

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

Затем вы используете Angularjs filter в вашем html, чтобы вы могли отобразить нужный формат. 

<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;
}
0 голосов
/ 22 ноября 2018 
var date = new Date();
var day = date.getDay()
if(day == 6 || day == 0) {
    document.getElementById("p1").classList.add("mystyle");
}
document.getElementById("p1").textContent = date;
0 голосов
/ 22 ноября 2018

Сначала вам необходимо правильно определить, относится ли ваша дата к выходным, чтобы узнать это, вам просто нужно проверить день недели на указанную дату. 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 ...
}
...