Mixing
Change color if date is weekend using javascript
0
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
javascript angularjs html5 unix-timestamp
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
add a comment |
0
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
javascript angularjs html5 unix-timestamp
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
2
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
– K. Alan Bates
Nov 22 '18 at 2:51
1
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.
– K. Alan Bates
Nov 22 '18 at 2:57
add a comment |
0
0
0
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
javascript angularjs html5 unix-timestamp
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
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
javascript angularjs html5 unix-timestamp
javascript angularjs html5 unix-timestamp
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
edited Nov 22 '18 at 4:21
georgeawg
33.5k105168
33.5k105168
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
asked Nov 22 '18 at 2:48
AndyJJAndyJJ
417
417
2
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
– K. Alan Bates
Nov 22 '18 at 2:51
1
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.
– K. Alan Bates
Nov 22 '18 at 2:57
add a comment |
2
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
– K. Alan Bates
Nov 22 '18 at 2:51
1
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.
– K. Alan Bates
Nov 22 '18 at 2:57
2
2
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
– K. Alan Bates
Nov 22 '18 at 2:51
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
– K. Alan Bates
Nov 22 '18 at 2:51
1
1
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.
– K. Alan Bates
Nov 22 '18 at 2:57
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.
– K. Alan Bates
Nov 22 '18 at 2:57
add a comment |
4 Answers
4
active
oldest
votes
1
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;
}
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
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
Nov 22 '18 at 5:08
@AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"
– holydragon
Nov 22 '18 at 6:18
add a comment |
1
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 ...
}
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
add a comment |
1
var date = new Date();
var day = date.getDay()
if(day == 6 || day == 0) {
document.getElementById("p1").classList.add("mystyle");
}
document.getElementById("p1").textContent = date;
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
Add some description for better human readability.
– AmerllicA
Nov 22 '18 at 5:15
add a comment |
1
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>answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423189%2fchange-color-if-date-is-weekend-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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;
}
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
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
Nov 22 '18 at 5:08
@AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"
– holydragon
Nov 22 '18 at 6:18
add a comment |
1
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;
}
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
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
Nov 22 '18 at 5:08
@AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"
– holydragon
Nov 22 '18 at 6:18
add a comment |
1
1
1
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;
}
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
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;
}
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
edited Nov 22 '18 at 3:45
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
answered Nov 22 '18 at 3:13
holydragonholydragon
1,9832925
1,9832925
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
Nov 22 '18 at 5:08
@AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"
– holydragon
Nov 22 '18 at 6:18
add a comment |
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
Nov 22 '18 at 5:08
@AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"
– holydragon
Nov 22 '18 at 6:18
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
Nov 22 '18 at 5:08
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
Nov 22 '18 at 5:08
@AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"
– holydragon
Nov 22 '18 at 6:18
@AndyJJ then try ng-class="{'saturday': isSaturday, 'sunday': isSunday}"
– holydragon
Nov 22 '18 at 6:18
add a comment |
1
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 ...
}
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
add a comment |
1
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 ...
}
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
add a comment |
1
1
1
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 ...
}
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
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 ...
}
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
answered Nov 22 '18 at 3:12
user615274user615274
1,52211222
1,52211222
add a comment |
add a comment |
1
var date = new Date();
var day = date.getDay()
if(day == 6 || day == 0) {
document.getElementById("p1").classList.add("mystyle");
}
document.getElementById("p1").textContent = date;
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
Add some description for better human readability.
– AmerllicA
Nov 22 '18 at 5:15
add a comment |
1
var date = new Date();
var day = date.getDay()
if(day == 6 || day == 0) {
document.getElementById("p1").classList.add("mystyle");
}
document.getElementById("p1").textContent = date;
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
Add some description for better human readability.
– AmerllicA
Nov 22 '18 at 5:15
add a comment |
1
1
1
var date = new Date();
var day = date.getDay()
if(day == 6 || day == 0) {
document.getElementById("p1").classList.add("mystyle");
}
document.getElementById("p1").textContent = date;
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
var date = new Date();
var day = date.getDay()
if(day == 6 || day == 0) {
document.getElementById("p1").classList.add("mystyle");
}
document.getElementById("p1").textContent = date;
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
answered Nov 22 '18 at 3:26
Atul BansodeAtul Bansode
112
112
Add some description for better human readability.
– AmerllicA
Nov 22 '18 at 5:15
add a comment |
Add some description for better human readability.
– AmerllicA
Nov 22 '18 at 5:15
Add some description for better human readability.
– AmerllicA
Nov 22 '18 at 5:15
Add some description for better human readability.
– AmerllicA
Nov 22 '18 at 5:15
add a comment |
1
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>answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
add a comment |
1
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>answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
add a comment |
1
1
1
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>answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
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>$(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>$(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>answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
edited Nov 22 '18 at 3:43
answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
answered Nov 22 '18 at 3:31
Shiv Kumar BaghelShiv Kumar Baghel
1,3763820
1,3763820
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423189%2fchange-color-if-date-is-weekend-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
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
– K. Alan Bates
Nov 22 '18 at 2:51
1
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.
– K. Alan Bates
Nov 22 '18 at 2:57