We Keep Coding

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 resize additional input in jquery ui Datepicker?

How can I set the width of dynamically added input fields which are getting values via a jQueryUI datepicker widget?
I have 2 inputs, "Calendar input" is where we are choosing date and it will be added automatically inside of our additional input via altField method (core method of datepicker). So can I dynamically resize the input make it lesser\larger?
Additional input: <input type="text" id="alternate" value="December,19 2015"><br>
Calendar input: <input type="text" id="from">
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
Here is a link to the fiddle - https://jsfiddle.net/mhf7kxo4/

Here is a working fiddle of what you are looking for.
Basic input autoresize plugin ( just extended isValidWidthChange limitation of this one) :
(function($){
$.fn.autoResizeInput= function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = ( (newWidth < currentWidth || newWidth > currentWidth )&& newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
Just add these lines too:
$("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
$("#alternate").focus().blur();
}
});
$("#alternate")
.autoResizeInput({
maxWidth: 18,
minWidth: 11,
comfortZone: 5
})
.focus()
.blur();

As you just want to do some stuff on datepicker date selection you can just add your stuff in the onClose or onSelect callback of the date picker
Example:
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
// do you stuff over here
$("#alternate").width(100).removeClass("disabled");
$("#to").datepicker("option", "minDate", selectedDate);
}
});

Do you mean like this?
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
$('input').css('width','auto');
}
});
jsFiddle Demo
If you do not wish to use a plugin, you might wish to see this solution:
Adjust width of input field to its input

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

Disable the previous dates of JQuery Calendar

I am taking 4 datepicker calendar,and i want to disable the dates of previous selected date.. I got some idea from JQuery date picker but its fine for 2 date pickers but i have to use 4 datepickers. So if any one has Solution just share with me..
For two date picker this is the code:
$(function() {
var dates = $( "#txt1, #txt2" ).datepicker({
minDate:0,
maxDate:"+1Y",
defaultDate: "+1w",
dateFormat:'dd-mm-yy',
numberOfMonths: 3,
onSelect: function( selectedDate ) {
var option = this.id == "txt1" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat, selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});

If your text inputs have ids of txt1 through txt4 then something simple like this would work:
onSelect: function(date) {
for(var i = 0; i < dates.length; ++i) {
if(dates[i].id < this.id)
$(dates[i]).datepicker('option', 'maxDate', date);
else if(dates[i].id > this.id)
$(dates[i]).datepicker('option', 'minDate', date);
}
}
Demo: http://jsfiddle.net/ambiguous/Rtbph/
An alternative that doesn't require your id attributes to compare nicely would use index thusly:
var dates = $('#first, #second, #third, #fourth').datepicker({
// ...
onSelect: function(date) {
var me = dates.index(this);
for(var i = 0; i < dates.length; ++i) {
if(i < me)
$(dates[i]).datepicker('option', 'maxDate', date);
else if(i > me)
$(dates[i]).datepicker('option', 'minDate', date);
}
}
});
Then you'd just have to make sure that your initial selector, $('#first, #second, #third, #fourth'), put the inputs in the proper left to right order.
Demo: http://jsfiddle.net/ambiguous/xaVZM/