We Keep Coding

appending divs dynamically based on daterange with javascript/jquery

Check here: http://js.do/code/79682
I am trying to figure out how to make it so that, when the date range is selected, the Dates that appear below are clickable and when they are clicked a div appears with the content for that date. So if Total Days: 5 then those 5 dates appear as links, when they are clicked the div content is displayed and if another div is clicked then the previous div closes and the new div content displays for the selected date. Every time I try incorporating the div "dates" it breaks the script.

The problem that you are probably running into is that you are trying to set onclick event to something that doesn't exist, that's why you need to set .delegate(). The fix is at the bottom.
So try this:
$(document).ready(function() {
document.getElementById('dates').style.display = 'none';
$( "#from" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy",
minDate: null,
maxDate: "+60D",
onSelect: function(selected) {
$("#to").datepicker("option","minDate", selected);
calcDiff();
}
});
$( "#to" ).datepicker({
altField: "#alternate1",
altFormat: "DD, d MM, yy",
minDate: new Date( (new Date()).getTime() + 86400000 ),
maxDate:"+60D",
onSelect: function(selected) {
$("#from").datepicker("option","maxDate", selected);
calcDiff();
}
});
function calcDiff() {
var date1 = $('#from').datepicker('getDate');
var date2 = $('#to').datepicker('getDate');
var diff = 0;
$('#totaldays').empty();
if (date1 && date2) {
diff = (Math.floor((date2.getTime() - date1.getTime()) / 86400000))+1;
for(var d = date1.getTime(); d <= date2.getTime(); d = d + 86400000){
$('#totaldays').append( '<a class="dates">' + $.datepicker.formatDate( "MM d, yy", new Date(d) ) + "</a><br>");
}
}
$('#calculated').val(diff);
}
var tempDate;
var closed;
$('body').delegate('.dates', 'click', function() {
var date = $(this).text();
$(".createdDiv").remove();
if(date != tempDate || closed){
$(this).after( '<div class="createdDiv" style="height:100px;background-color:blue;"></div>' );
closed = false;
}
else{
closed = true;
}
tempDate = $(this).text();
});
});

jQuery datepicker: highlight and style multiple dates

I'm using the jQuery date picker as an online calendar too. I have a setup which takes the date values in the data-value attribute of the .whats-on-block divs, and assigns the .special class to the relevant date value in the jQuery date picker, thus I can style it accordingly via CSS.
This works great, I also have a .highlights div with multiple date values as the data-highlight attribute, I'm wondering if I can assign the .highlighter class to the relevant date values in the date picker so I can style these separately? I'm not really sure how to achieve this as the beforeShowDay function is already being used to assign the .special. Here's the markup...HTML
<div class="whats-on-grid">
<div class="datepicker-block" class="whats-on-block">
<div id="datepicker"></div>
</div>
<div class="whats-on-block" data-value="1982014"></div>
<div class="whats-on-block" data-value="2282014"></div>
<div class="whats-on-block" data-value="1482014"></div>
<div class="whats-on-block" data-value="2982014"></div>
//etc
</div>
<div class="highlights" data-highlight="2882014 2782014 1582014 2082014 1992014"></div>
CSS
.special { background-color: red !important; }
.highlighter { background-color: blue !important; }
jQuery
var $container = $('.whats-on-grid');
var $blocks = $("div.whats-on-block", ".whats-on-grid");
$(function () {
var blocks = $('.whats-on-grid .whats-on-block')
$('#datepicker').datepicker({
inline: true,
//nextText: '→',
//prevText: '←',
showOtherMonths: true,
//dateFormat: 'dd MM yy',
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
//showOn: "button",
//buttonImage: "img/calendar-blue.png",
//buttonImageOnly: true,
onSelect: function (dateText, inst) {
var date = new Date(dateText);
var dateValue = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
$container.isotope({
filter: '[data-value~="' + dateValue + '"], #datepicker-block'
});
},
beforeShowDay: function (date) {
var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
var contains = blocks.filter('[data-value~="' + target + '"]').length > 0;
return [true, contains ? 'special' : '', '']
}
});
});
Any suggestions on how this can be achieved would be greatly appreciated!

If all you are trying to do is to add the highlighter class to the highlights dates prior to rendering, you should be able to easily achieved that in your beforeShowDay function like this:
beforeShowDay: function (date) {
var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
var isSpecial = blocks.filter('[data-value~="' + target + '"]').length > 0;
var isHighlight = $("div[class~='highlights']").filter('[data-highlight~="' + target + '"]').length > 0;
if (isSpecial)
return [true, 'special', ''];
else if (isHighlight)
return [true, 'highlighter', ''];
return [true, '', ''];
}
The tricky part is what if a special date is also a highlight date. You may need different CSS styling to distinguish them.
Live demo available on fiddle.

jquery ui datepicker with range selection

I want to use jQuery UI datepicker on my asp.net aspx page. I want to select a range and a OK button on the jQuery UI calendar. I found a link as well where this is done:
jQuery UI Datepicker - Range Selection with Only One Control
But when I use the code on this page and click the textbox, almost 4 calendar's appear horizontally plus styles are messed up. I am not sure which files are required for this page and which ones are extra.
Please suggest how to use jQuery UI datepicker like this.

Starting from the provided link, I build up a jsfiddle with the relevant code. I can't see the issue you are facing.
Code:
$.datepicker._defaults.onAfterUpdate = null;
var datepicker__updateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function (inst) {
datepicker__updateDatepicker.call(this, inst);
var onAfterUpdate = this._get(inst, 'onAfterUpdate');
if (onAfterUpdate) onAfterUpdate.apply((inst.input ? inst.input[0] : null), [(inst.input ? inst.input.val() : ''), inst]);
}
$(function () {
var cur = -1,
prv = -1;
$('#jrange div')
.datepicker({
//numberOfMonths: 3,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShowDay: function (date) {
return [true, ((date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')];
},
onSelect: function (dateText, inst) {
var d1, d2;
prv = cur;
cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime();
if (prv == -1 || prv == cur) {
prv = cur;
$('#jrange input').val(dateText);
} else {
d1 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.min(prv, cur)), {});
d2 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.max(prv, cur)), {});
$('#jrange input').val(d1 + ' - ' + d2);
}
},
onChangeMonthYear: function (year, month, inst) {
//prv = cur = -1;
},
onAfterUpdate: function (inst) {
$('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>')
.appendTo($('#jrange div .ui-datepicker-buttonpane'))
.on('click', function () {
$('#jrange div').hide();
});
}
})
.position({
my: 'left top',
at: 'left bottom',
of: $('#jrange input')
})
.hide();
$('#jrange input').on('focus', function (e) {
var v = this.value,
d;
try {
if (v.indexOf(' - ') > -1) {
d = v.split(' - ');
prv = $.datepicker.parseDate('mm/dd/yy', d[0]).getTime();
cur = $.datepicker.parseDate('mm/dd/yy', d[1]).getTime();
} else if (v.length > 0) {
prv = cur = $.datepicker.parseDate('mm/dd/yy', v).getTime();
}
} catch (e) {
cur = prv = -1;
}
if (cur > -1) $('#jrange div').datepicker('setDate', new Date(cur));
$('#jrange div').datepicker('refresh').show();
});
});
Demo: http://jsfiddle.net/IrvinDominin/LALED/

From: <input type="text" name="date_from" id="date_from" />
To: <input type="text" name="date_to" id="date_to" />
$(function() {
$("#date_from").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "button",
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_to").datepicker("option", "minDate", selectedDate);
}
});
$("#date_to").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "button",
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_from").datepicker("option", "maxDate", selectedDate);
}
});
});
Link demo: http://jsfiddle.net/wimarbueno/fpT6q/1/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Try this.

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 change highlighted color onSelect of a particular date

I have this code of Jquery datepicker that I am working on.
What I want to do is change the color of the current highlighted date to grey when I click on anyother date, and the color of the clicked date to green.
The tricky part is that only the ones which are grey can turn green and viceversa but no other dates can turn into green on click.
I dont understand what I am doing wrong. Or is it that my code is completely wrong.
If anyone can help.
here's the code
$(function() {
var togo=['10/25/2013']
var datesArray=['10/27/2013','10/28/2013']
var datesArray1=['10/25/2013','10/26/2013']
var datesArray2=['10/24/2013']
$( "#datepicker" ).datepicker({
numberOfMonths: 2,
selectMultiple:true,
beforeShowDay: function (date) {
var theday = (date.getMonth()+1) +'/'+
date.getDate()+ '/' +
date.getFullYear();
return [true,$.inArray(theday, datesArray2) >=0?"specialDate":($.inArray(theday, datesArray)>=0?"specialDate2":($.inArray(theday, datesArray1)>=0?"specialDate1":''))];
},
onSelect: function(date){
console.log("clicked"+date);
return [true,$.inArray(date, togo) >=0?"specialDate":($.inArray(date, datesArray1)>=0?"specialDate1":'')] ;
}
});
//$.inArray(theday, datesArray) >=0?"specialDate":'specialDate1'
});
For a clearer picture of what I am doing and what I want heres a JSFiddle
http://jsfiddle.net/pratik24/Kyt2w/3/
thanks.

onSelect does not behave like beforeShowDay. You cannot return an array with [true/false, class, popup]. Instead, you will have to apply the class manually in the function.
I'm not sure exactly what you are trying to do, but I would rearrange your code a bit. I made a array with the gray dates, then a variable with the green date. I never change the array, but update the green date on click, and then call a refresh on the datepicker:
$(function () {
var togo = [ '10/25/2013' ];
var redDates = [ '10/27/2013', '10/28/2013' ];
var grayDates = [ '10/24/2013', '10/25/2013', '10/26/2013' ];
var greenDate = '10/24/2013';
$("#datepicker").datepicker({
numberOfMonths: 2,
selectMultiple: true,
beforeShowDay: function (date) {
var theday = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
return [true, greenDate == theday ? "specialDate" : ($.inArray(theday, redDates) >= 0 ? "specialDate2" : ($.inArray(theday, grayDates) >= 0 ? "specialDate1" : ""))];
},
onSelect: function (dateStr) {
var date = new Date(dateStr);
var theday = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
if ($.inArray(theday, grayDates) >= 0) {
greenDate = theday;
}
$('#datepicker').datepicker("refresh");
}
});
});
I wasn't sure what togo was for, but this should get you started.
Demo: http://jsfiddle.net/xU47h/3/