error with tooltip in datepicker bootstrap - javascript

Just have a question about my tooltip in the datepicker.
The calendar numbers are moving to the right if I add the tooltip to the datepicker.
I can not reproduce the error with jsfiddle but following is the code and a picture. If I have a look at the tooltip it produces style="left:135.208px"?
html
<div id="datepicker99"></div>
javascript
var datesGreen = ['3/12/2015', '4/12/2015'];
var datesYellow = ['16/12/2015', '17/12/2015', '18/12/2015'];
var datesRed = ['24/12/2015', '25/12/2015'];
$("#datepicker99").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, datesGreen) != -1){
return {
tooltip: 'text',
classes: 'highlight-green'
};
}
if ($.inArray(formattedDate, datesYellow) != -1){
return {
classes: 'highlight-yellow'
};
}
if ($.inArray(formattedDate, datesRed) != -1){
return {
classes: 'highlight-red'
};
}
return;
}
});
$('.highlight-green').tooltip({placement : 'top'});
css
.ui-widget{
font-size: 0.7em;
}
td.highlight {
}
td.highlight-green {
background: green!important;
color: #fff!important;
}
td.highlight-yellow {
background: yellow!important;
color: #000!important;
}
td.highlight-red {
background: red!important;
color: #fff!important;
}
and jsfiddle:
jsfiddle


It works fine if you apply the below change:
$('.highlight-green').tooltip({placement : 'top', container: 'body'});

Related

Why my focus is not working properly?

I have data.json file is being loaded after I focus but after I focus then my datepicker is not showing why I didn't understand. but if I focus second time I can see.. where is my mistake ?
function flattenFieldsArray(arr) {
return arr.map(function(item) {
return item.field
})
}
$(function() {
var focused = false;
$(document.body).one("focus", '#checkin,#checkout', function() {
if (!focused) {
$.getJSON('data.json', function(data) {
// use ajax data mapped to same structure as original variables
var firstDate = flattenFieldsArray(data.firstDate);
var lastDate = flattenFieldsArray(data.lastDate);
var availabledays = flattenFieldsArray(data.availabledays);
var booked = flattenFieldsArray(data.booked);;
var ssdays = [];
// nothing was changed below
var dateFormat = "mm/dd/yy",
from = $("#checkin").datepicker({
changeMonth: true,
numberOfMonths: 2,
firstDay: 1,
minDate: new Date(firstDate),
maxDate: new Date(lastDate),
onSelect: function(selectedDate) {
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
$("#checkout").datepicker("option", "minDate", date);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [false, "ui-highlight"];
}
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-bos"];
} else {
return [true];
}
},
isTo1: true,
}).on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 2,
minDate: new Date(firstDate),
maxDate: new Date(lastDate),
onSelect: function(selectedDate) {
$("#checkin").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-highlight-donus"];
}
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, ssdays) >= 0) {
return [true, "ui-ss-donus"];
} else {
return [true];
}
}
}).on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
})
focused = true;
}
});
});
.form{
width:960px;
margin:120px auto;
}
.form input{
width:250px;
padding:10px;
}
.ui-highlight .ui-state-default{background: red !important;border-color: red !important;color: white !important; cursor:no-drop;}
.ui-bos .ui-state-default{background: green !important;border-color: green !important;color: white !important;}
.ui-ss .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
.ui-ss-donus .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
.ui-highlight-donus .ui-state-default{background: red !important;border-color: red !important;color: white !important; }
.ui-testtarih .ui-state-default{
background:black !important;
color:#FFF !important;
}
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<div class="form">
<input type="text" id="checkin" />
<input type="text" id="checkout" />
<input type="submit" value="Search" />
</div>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
footnote: I couldn't add my json data to stackoverflow snippet that's why I add plunker demo in plunker demo works
Click to see plunker demo

$.getJSON has a done() function in which you can write you logic after data is loaded. You can trigger the datepicker manually inside the done function
Here's a working fork

It is because, on the first focus, the datepickers are applied on the elements and NOT triggered. Mind the difference between binding an event and triggering it.
On the first time focus, datepicker will be applied and NOT triggered as it is not already bound to the element. But on any subsequent focus, it would trigger the datepicker and open it since it is already bound to the element.
As a solution,you can try adding $("#checkin").datepicker('show'); and $("#checkout").datepicker('show'); after the end for $("#checkin").datepicker({}) and $("#checkout").datepicker({}), respectively.

You should load your data prior to the first focus event on your datepickers.
Here's an example :
plunkr
$( document ).ready(function() {
var data;
$.getJSON('data.json', function (d) {
data = d;
console.log('data', d);
setupDatepickers();
});
function setupDatepickers() {
// use ajax data mapped to same structure as original variables
var firstDate = flattenFieldsArray(data.firstDate);
var lastDate = flattenFieldsArray(data.lastDate);
var availabledays = flattenFieldsArray(data.availabledays);
var booked = flattenFieldsArray(data.booked);;
var ssdays = [];
// nothing was changed below
var dateFormat = "mm/dd/yy",
from = $("#checkin")
.datepicker({
beforeShowDay : function (date) {
var y = date
.getFullYear()
.toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date
.getDate()
.toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [false, "ui-highlight"];
}
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-bos"];
} else {
return [true];
}
},
changeMonth : true,
firstDay : 1,
isTo1 : true,
maxDate : new Date(lastDate),
minDate : new Date(firstDate),
numberOfMonths: 2,
onSelect : function (selectedDate) {
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
$("#checkout").datepicker("option", "minDate", date);
}
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout")
.datepicker({
beforeShowDay : function (date) {
var y = date
.getFullYear()
.toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date
.getDate()
.toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-highlight-donus"];
}
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, ssdays) >= 0) {
return [true, "ui-ss-donus"];
} else {
return [true];
}
},
changeMonth : true,
changeYear : true,
firstDay : 1,
maxDate : new Date(lastDate),
minDate : new Date(firstDate),
numberOfMonths: 2,
onSelect : function (selectedDate) {
$("#checkin").datepicker("option", "maxDate", selectedDate);
}
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
}
});

How to change datepicker cell style when it is not non accessible?

I have found similar questions on stackoverflow, but all the solution provided change style while it is not accessible like here(jsfiddle)
how to apply style when it is clickable
$("#setDateTo").datepicker({
defaultDate: date,
minDate: "-0d",
dateFormat: 'dd MM yy',
beforeShowDay: changestyle
});
function changestyle(){
var day = date.getDay();
if(date.getDate() == 12 || date.getDate() == 22)
return[true, 'mystyle', 'changed'];
else return[true, ''];
}
Any help would be appreciated !

how to apply style when it is clickable....
You can set the color attribute to all anchor elements in table cell not having the class ui-datepicker-unselectable
td:not(.ui-datepicker-unselectable) a {
color: blue !important;
}
$('input').datepicker({
dateFormat: "yy-mm-dd",
minDate: "-0d",
maxDate: "+90d",
firstDay: 0,
beforeShowDay: noWeekendsOrHolidaysOrBlockedDates,
beforeShow: function (inp, inst) {
var a = this; // ui-datepicker-unselectable
}
});
function noWeekendsOrHolidaysOrBlockedDates(date) {
//var noWeekend = jQuery.datepicker.noWeekends(date);
return setHoliDays(date);
}
// set holidays function which is configured in beforeShowDay
function setHoliDays(date) {
var day = date.getDay();
if (day == 5 || day == 6)
return [false, ''];
if (date.getDate() == 11 || date.getDate() == 23)
return [false, 'holiday red', 'Red!'];
if (date.getDate() == 12 || date.getDate() == 22)
return [false, 'holiday green', 'Green!'];
return [true, ''];
}
.wrapper {
padding: 10px;
}
td.red span.ui-state-default {
color: #f00;
}
td.green span.ui-state-default {
color: #0f0;
}
td:not(.ui-datepicker-unselectable) a {
color: yellow !important;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="wrapper">
<input>
</div>

I understood that you want to apply some style when date changes and matches your value.
Check this.
On change event, foo() is called. Make your modifications inside that.

How to set specific days with json for datepicker?

I have more than one specific days in my datepicker and I set these days with array but I want to set with json instead of array (I know both of them are object). You will see below example I have specific days if you click.
so my question is how can I set my dates with json data to use specific days ?
$(function() {
var ilktarih = ['2017-03-23'];
var sontarih = ['2017-04-10']
var bostarihler = ['2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24', '2017-03-25', '2017-03-26', '2017-03-27', '2017-03-28', '2017-03-29', '2017-03-30'];
var dolutarihler = ['2017-02-22', '2017-02-23', '2017-02-24', '2017-02-25', '2017-02-26', '2017-02-27', '2017-02-28', '2017-03-01', '2017-03-02', '2017-03-03', '2017-03-04', '2017-03-05', '2017-03-06', '2017-03-07', '2017-03-08', '2017-03-09', '2017-03-10', '2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14'];
var sstarihler = [];
var dateFormat = "mm/dd/yy",
from = $("#checkin").datepicker({
changeMonth: true,
numberOfMonths: 2,
firstDay: 1,
minDate: new Date(ilktarih),
maxDate: new Date(sontarih),
onSelect: function(selectedDate) {
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
$("#checkout").datepicker("option", "minDate", date);
$("#checkout").trigger("focus");
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, dolutarihler) >= 0) {
return [false, "ui-highlight"];
}
if (jQuery.inArray(currDate, bostarihler) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, sstarihler) >= 0) {
return [false, "ui-ss"];
} else {
return [true];
}
},
isTo1: true,
}).on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 2,
minDate: new Date(ilktarih),
maxDate: new Date(sontarih),
onSelect: function(selectedDate) {
$("#checkin").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, dolutarihler) >= 0) {
return [true, "ui-highlight-donus"];
}
if (jQuery.inArray(currDate, bostarihler) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, sstarihler) >= 0) {
return [true, "ui-ss-donus"];
} else {
return [true];
}
}
}).on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
.form {
width: 960px;
margin: 120px auto;
}
.form input {
width: 250px;
padding: 10px;
}
.ui-highlight .ui-state-default {
background: red !important;
border-color: red !important;
color: white !important;
cursor: no-drop;
}
.ui-bos .ui-state-default {
background: green !important;
border-color: green !important;
color: white !important;
}
.ui-ss .ui-state-default {
background: yellow !important;
border-color: yellow !important;
color: gray !important;
cursor: help;
}
.ui-ss-donus .ui-state-default {
background: yellow !important;
border-color: yellow !important;
color: gray !important;
cursor: help;
}
.ui-highlight-donus .ui-state-default {
background: red !important;
border-color: red !important;
color: white !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<div class="form">
<input type="text" id="checkin" />
<input type="text" id="checkout" />
<input type="submit" value="Ara" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
my json dates
{
"ilktarih": ["2017-03-23"],
"sontarih": ["2017-04-10"],
"bostarihler": ["2017-03-15","2017-03-16","2017-03-17","2017-03-18","2017-03-19","2017-03-20","2017-03-21","2017-03-22","2017-03-23","2017-03-24","2017-03-25","2017-03-26","2017-03-27","2017-03-28","2017-03-29","2017-03-30"],
"dolutarihler": ["2017-08-22","2017-06-23","2017-06-24","2017-05-25","2017-06-26","2017-10-27","2017-02-28","2017-03-01","2017-03-02","2017-03-03","2017-03-04","2017-03-05","2017-03-06","2017-03-07","2017-03-08","2017-03-09","2017-03-10","2017-03-11","2017-03-12","2017-03-13","2017-03-14"]
}
CodePen Demo

jquery ui date range 15 day between two date

How can be a possible with jquery ui I need 15 days between two input..how can I choose just 15 day between two date ? my mind went black and I can't do that that why I'm ashamed
if you want to details please click here
$(function() {
var ilktarih = ['2017-03-23'];
var sontarih = ['2017-04-10']
var bostarihler = ['2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24', '2017-03-25', '2017-03-26', '2017-03-27', '2017-03-28', '2017-03-29', '2017-03-30'];
var dolutarihler = ['2017-02-22', '2017-02-23', '2017-02-24', '2017-02-25', '2017-02-26', '2017-02-27', '2017-02-28', '2017-03-01', '2017-03-02', '2017-03-03', '2017-03-04', '2017-03-05', '2017-03-06', '2017-03-07', '2017-03-08', '2017-03-09', '2017-03-10', '2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14'];
var sstarihler = [];
var dateFormat = "mm/dd/yy",
from = $("#checkin").datepicker({
changeMonth: true,
numberOfMonths: 2,
firstDay: 1,
minDate: new Date(ilktarih),
maxDate: new Date(sontarih),
onSelect: function(selectedDate) {
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
$("#checkout").datepicker("option", "minDate", date);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, dolutarihler) >= 0) {
return [false, "ui-highlight"];
}
if (jQuery.inArray(currDate, bostarihler) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, sstarihler) >= 0) {
return [false, "ui-ss"];
} else {
return [true];
}
},
isTo1: true,
}).on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 2,
minDate: new Date(ilktarih),
maxDate: new Date(sontarih),
onSelect: function(selectedDate) {
$("#checkin").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, dolutarihler) >= 0) {
return [true, "ui-highlight-donus"];
}
if (jQuery.inArray(currDate, bostarihler) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, sstarihler) >= 0) {
return [true, "ui-ss-donus"];
} else {
return [true];
}
}
}).on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
.form {
width: 960px;
margin: 120px auto;
}
.form input {
width: 250px;
padding: 10px;
}
.ui-highlight .ui-state-default {
background: red !important;
border-color: red !important;
color: white !important;
cursor: no-drop;
}
.ui-bos .ui-state-default {
background: green !important;
border-color: green !important;
color: white !important;
}
.ui-ss .ui-state-default {
background: yellow !important;
border-color: yellow !important;
color: gray !important;
cursor: help;
}
.ui-ss-donus .ui-state-default {
background: yellow !important;
border-color: yellow !important;
color: gray !important;
cursor: help;
}
.ui-highlight-donus .ui-state-default {
background: red !important;
border-color: red !important;
color: white !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<div class="form">
<input type="text" id="checkin" />
<input type="text" id="checkout" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Maybe you want something like this?.
$(function () {
$("#txtFrom").datepicker({
onSelect: function(selectedDate) {
//$("#cal4").datepicker("setDate", selectedDate);
var date = $(this).datepicker("getDate");
date.setDate(date.getDate() + 15);
$("#txtTo").datepicker("setDate", date);
$("#txtTo").datepicker("option", "minDate", selectedDate);
$("#txtTo").datepicker("option", "maxDate", date);
}
});
$("#txtTo").datepicker({
changeMonth: true,
changeYear: true
})
});
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text" id="txtFrom" />
<input type="text" id="txtTo" />

You should use moment.js for any complicated enough date related javascript task

add class if date is today

I have some boxes that represent the squares in an advent calendar. I've defined the date for each box in the data attribute which I'm using to compare against the current day. I'm trying to add a class 'today' to the box that represents the current day. I've created a fiddle to demonstrate this. How can I fix it so that today class is added to the appropriate box?
JSFiddle
$(function() {
var currentDate = Date.now();
$(".grid-item").each(function() {
var specifiedDate = $(this).data('date');
var date = Date.parse(specifiedDate);
if (!isNaN(date) == currentDate) {
$(this).addClass('today');
}
else if(!isNaN(date) && currentDate - date > 0) {
$(this).addClass('past');
}
else {
$(this).addClass('future');
}
});
});

You don't have to use Date.now() as this doesn't outputs the dates similar to the data attributes have. Instead you have to create current date as this and check in the conditions like:
$(function() {
var date = new Date(),
currentDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
$(".grid-item").each(function() {
var specifiedDate = $(this).data('date');
if (specifiedDate == currentDate) {
$(this).addClass('today');
} else if (currentDate > specifiedDate) {
$(this).addClass('past');
} else {
$(this).addClass('future');
}
});
});
.grid-item {
height: 170px;
width: 170px;
float: left;
background: red;
margin: 10px;
}
.today {
background: yellow;
border: red 1px solid;
}
.past {
background: black;
border: red 1px solid;
}
.future {
background: blue;
border: red 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-item" data-date="2015-11-23">
</div>
<div class="grid-item" data-date="2015-11-24">
</div>
<div class="grid-item" data-date="2015-11-25">
</div>
<div class="grid-item" data-date="2015-11-26">
</div>
<div class="grid-item" data-date="2015-11-27">
</div>
<div class="grid-item" data-date="2015-11-28">
</div>
<div class="grid-item" data-date="2015-11-29">
</div>

You can add class to current date using following jquery, just replace your jquery with following :-
$(function() {
var d =new Date();
var curmonth = d.getMonth()+1;
var curDate = d.getFullYear()+"-"+curmonth+"-"+d.getDate();
$(".grid-item[data-date="+curDate+"]").addClass("today");
});

A possible solution
jsfiddle
$(function() {
var currentDate = Date.now();
var a = new Date(currentDate);
$(".grid-item").each(function() {
var specifiedDate = $(this).data('date');
var date = Date.parse(specifiedDate);
var b = new Date(date);
if (!isNaN(b) && b.getMonth() == a.getMonth() && b.getDay()== a.getDay() && b.getYear() == a.getYear()) {
$(this).addClass('today');
}
else if(!isNaN(b) && a - b > 0) {
$(this).addClass('past');
}
else {
$(this).addClass('future');
}
});
});

See this JSFiddle
JavaScript
$(function() {
var currentDate = Date.parse((new Date()).toLocaleDateString());
$(".grid-item").each(function() {
var specifiedDate = $(this).data('date');
var date = Date.parse(specifiedDate);
if (!isNaN(date) && date == currentDate) {
$(this).addClass('today');
}
else if(!isNaN(date) && currentDate - date > 0) {
$(this).addClass('past');
}
else {
$(this).addClass('future');
}
});
});

There is a single mistake in your code. Date.now() gives you the current timestamp in milliseconds. While you have a date in the data-date which will not match in any case. Correct way will be to compare the date instead of timestamps. Or just take the date without the time for comparison

The easiest solution would be to create new Date() object, and set it's hours, minutes and seconds to 0 like that:
currentDate = new Date();
currentDate.setHours(0);
currentDate.setMinutes(0);
currentDate.setSeconds(0);
and then:
var date = new Date(specifiedDate);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
Note that I am also setting date's hours, minutes and second to 0 due timezones (this can be fixed, but as I said, it seems to be the easiest way)

Or you can simply use :
$(function() {
$(".grid-item").each(function() {
$('.grid-item').eq(new Date().getDay()-1).addClass('today');
});
});
FIDDLE

Try This code
$(function() {
var currentDate = new Date();
$(".grid-item").each(function() {
var specifiedDate = $(this).data('date');
var date = new Date(specifiedDate);
if(date.setHours(0,0,0,0) == currentDate.setHours(0,0,0,0)){
$(this).addClass('today');
}
});
});

this code works for me last day. hope this helps you..
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
var today = yyyy+'-'+mm+'-'+dd;
if (date == today) {
$(this).addClass('today');
}
make sure two dates are same format..

Categories