We Keep Coding

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

error with tooltip in datepicker bootstrap

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

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