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));
});
}
});
Related
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
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
Currently working on jquery date picker with my current code where I can able to clone the row and i can able to add years and months. But when i try click add more it will create one more row and again i can able to add from date and to date it was calculating perfectly but when i click the delete button it was deleting the row but not removing the corresponding value.
here is what i tired for delete
$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row3').length;
if (len > 1) {
$(this).closest(".btn_less1").parent().parent().parent().remove();
uppdiff();
}
});
Here is the fiddle link for rest of the code
Thanks in advance
The order you defined your function was wrong, the function uppdiff was not found since it was defined much later. I rearranged your code as shown below:
$(function() {
var diffDays = 0;
$.datepicker.setDefaults({
dateFormat: "mm/dd/yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
var valid = true;
function uppdiff() {
if (valid) {
var dateStart = [];
var dateEnd = [];
$.each($('.datepicker'), function() {
if ($(this).hasClass('startDate'))
dateStart.push($(this).datepicker('getDate'))
else
dateEnd.push($(this).datepicker('getDate'))
});
diffDays = 0;
$.each(dateStart, function(key, value) {
$.each(dateStart, function(key2, value) {
if (key !== key2 && !(dateStart[key] >= dateEnd[key2] || dateEnd[key] <= dateStart[key2])) {
alert('Date ranges overlap');
valid = false;
return valid;
}
});
diffDays += parseInt((dateEnd[key] - dateStart[key]) / (1000 * 60 * 60 * 24));
return valid;
});
var year = parseInt(diffDays / 365);
var date = diffDays - (365 * year);
var month = parseInt(date / 30);
//document.getElementById("txt_expy").innerHTML = year + " year";
//document.getElementById("txt_expm").innerHTML = month + " Month";
if(year >= 0){
$("#txt_expy").text(year + " year");
}
if(month >= 0){
$("#txt_expy").text(month + " Month");
}
}
}
$(".cloned-row3").find(".datepicker").removeClass('hasDatepicker').datepicker();
var count = 0;
$(document).on("click", ".exp_add_button", function() {
var $clone = $('.cloned-row3:eq(0)').clone(true, true);
$clone.find('[id]').each(function() {
this.id += 'someotherpart'
});
$clone.find('.btn_more').after("<input type='button' value='Delete Row' class='btn_less1 selbtnless' id='buttonless'/>")
$clone.attr('id', "added" + (++count));
/*$clone.find(".degree_Description").attr('disabled', true).val('');*/
$clone.find("input.startDate,input.endDate")
.val('')
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker();
$(this).parents('.wrk_exp').after($clone);
});
$(document).on('change', ".datepicker", function() {
var valid = true;
$.each($('.datepicker'), function() {
if ($(this).val() == "") {
valid = false;
return false;
}
uppdiff();
});
uppdiff();
});
$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row3').length;
if (len > 1) {
$(this).closest(".btn_less1").parent().parent().parent().remove();
uppdiff();
}
});
});
Here is the updated JSFiddle
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
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
});
});