We Keep Coding

Javascript Booking Year Calendar

I'm looking for year calendar with select range functions, but i don't found this. And I decided customize Bootstrap Year Calendar - http://www.bootstrap-year-calendar.com/
And I'm stuck, my customised version is on http://ngrdanjski.com/calendar/
and I'm looking for help!
I added:
All days are disabled by default.
You can added Price periods, in this dates period you have enabled booking.
I want to add option when first click on the day it's first day of booking range, and second click is last day of booking range. Right now when click on day you have enable start date/first day, but when you click second time on day when you want to select end date, it's again start/first date. I wan't to have function to select start and end date. First click on day is start and second is end.
Code for current behavior is:
if(this.options.enableRangeSelection) {
cells.mousedown(function (e) {
if(e.which == 1)
{
var currentDate = _this._getDate($(this));
//console.log(currentDate);
if(_this.options.allowOverlap || _this.getEvents(currentDate).length == 0)
{
_this._mouseDown = true;
_this._rangeStart = _this._rangeEnd = currentDate;
_this._refreshRange();
}
}
});
cells.mouseenter(function (e) {
//console.log(e);
if (_this._mouseDown)
{
var currentDate = _this._getDate($(this));
if(!_this.options.allowOverlap)
{
var newDate = new Date(_this._rangeStart.getTime());
if(newDate < currentDate)
{
var nextDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() + 1);
while(newDate < currentDate)
{
if(_this.getEvents(nextDate).length > 0)
{
break;
}
newDate.setDate(newDate.getDate() + 1);
nextDate.setDate(nextDate.getDate() + 1);
}
}
else
{
var nextDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() - 1);
while(newDate > currentDate)
{
if(_this.getEvents(nextDate).length > 0)
{
break;
}
newDate.setDate(newDate.getDate() - 1);
nextDate.setDate(nextDate.getDate() - 1);
}
}
currentDate = newDate;
}
var oldValue = _this._rangeEnd;
_this._rangeEnd = currentDate;
if (oldValue.getTime() != _this._rangeEnd.getTime())
{
_this._refreshRange();
}
}
});
/* $(window).mouseup(function (e) {
if (_this._mouseDown)
{
_this._mouseDown = false;
_this._refreshRange();
var minDate = _this._rangeStart < _this._rangeEnd ? _this._rangeStart : _this._rangeEnd;
var maxDate = _this._rangeEnd > _this._rangeStart ? _this._rangeEnd : _this._rangeStart;
_this._triggerEvent('selectRange', {
startDate: minDate,
endDate: maxDate,
events: _this.getEventsOnRange(minDate, new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate() + 1))
});
}
}); */
}
URL: https://ngrdanjski.com/calendar/js/bootstrap-year-calendar.js
Full version: https://codepen.io/NGrdanjski/pen/bQGdRb
I don't have skill for this functionality, please help.
Tnx!

I edited your code a bit. I understand that you want to set two dates, the start and the end of the range, and all that happens in two clicks. I also added a check if the second date is after the first one, if it's not they will swap places, so the earlier date is the rangeStart. The dates are stored in rangeStart and rangeEnd:
Edit: here's a pen
cells.mousedown(function (e) {
if(e.which == 1)
{
var currentDate = _this._getDate($(this));
//console.log(currentDate);
if(_this.options.allowOverlap || _this.getEvents(currentDate).length == 0)
{
if(!_this._mouseDown) {
_this._mouseDown = true;
_this._rangeStart = _this._rangeEnd = currentDate;
_this._refreshRange();
}
else {
_this._mouseDown = false;
_this._rangeEnd = currentDate;
if(_this._rangeEnd.getTime() < _this._rangeStart.getTime()) {
var tempDate = _this._rangeEnd;
_this._rangeEnd = _this._rangeStart;
_this._rangeStart = tempDate;
}
// _this._refreshRange();
}
}
if(_this._rangeStart != _this._rangeEnd) {
console.log(_this._rangeStart.getDate() + ',' + _this._rangeEnd.getDate());
}
}
});

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

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

Disabling dates and specific weekdays in jquery datepicker

I'm trying to disable specific dates (i.e christmas etc) PLUS disabling certain weekdays per default in the jQuery UI datepicker, but I can't get it to work. I have the following:
<script type="text/javascript">
iDays = 2;
blockDays = [1,4,6];
$(document).ready(function () {
$.datepicker.setDefaults($.datepicker.regional['sv']);
$('.inpDate').datepicker({
dateFormat: 'yy-mm-dd',
minDate: iDays,
maxDate: 14,
showOtherMonths: true,
showStatus: true,
beforeShowDay: noHolidays
});
var disabledDays = ["12-24-2013", "12-25-2013", "12-26-2013", "12-31-2013", "1-1-2014"]
function noHolidays(date) {
return [!disableSpecificWeekDays(date) && !nationalDays(date)];
}
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
return true;
}
}
return false;
}
function disableSpecificWeekDays(date) {
var daysToDisable = blockDays;
var day = date.getDay();
for (i = 0; i < daysToDisable.length; i++) {
if ($.inArray(day, daysToDisable) != -1) {
return [false];
}
}
return [true];
}
});
</script>
If I run ONLY the disableSpecificWeekDays in the "beforeShowDay" parameter it works fine, same goes with the nationalDays. But for some reason it FEELS like it's simply ignoring the date parameter if I call it through the noHoliday function.
In short, I need help!

Just noticed your question after having answered a similar/duplicate question. Instead of copying the code from there just have a look here: Hide weekdays and specific dates of jquery datepicker

jquery datepicker datepicker beforeShowDay not working in next year

i am trying to enable dates in jQuery datepicker calendar, it works well for 2013 dates but 2014 dates it is not working.
here is my code
<script>
$(document).ready(function () {
var enabledDays = ['11-30-2013', '12-14-2013', '12-21-2013', '01-11-2014', '01-11-2014', '01-25-2014', '02-08-2014', '02-22-2014', ]
function enableAllTheseDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, enabledDays) != -1) {
return [true];
}
}
return [false];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yyyy',
beforeShowDay: enableAllTheseDays
});
});
</script>
how to get this to work in 2014 dates aswell.
Thanks

Might be too late to help, but drop the leading zero on months <=9. 03-10-2014 fails whereas 3-10-2014 works fine with the code you have. See the fiddle
$(document).ready(function () {
var enabledDays = ['11-30-2013', '12-14-2013', '12-21-2013', '3-10-2014', '11-30-2014']
function enableAllTheseDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, enabledDays) != -1) {
return [true];
}
}
return [false];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yyyy',
beforeShowDay: enableAllTheseDays
});
});