We Keep Coding

Jquery Datepicker throws Error on setDate

I'm having and issue where when i try to use the setDate method of the jquery datepicker I get the following error:
Uncaught RangeError: Maximum call stack size exceeded
The code is as follows, and the error happens in the last line of the code.
I can try setDate with multiple different dates, using date objects, no matter what I do, i get the error.
$('.revEndDateInput').datepicker({
format: "dd/mm/yyyy",
startView: "days",
minViewMode: "days",
language: 'pt-BR',
orientation: 'bottom right',
});
$(".revEndDateInput").datepicker().on('changeDate', function(){
var ThisID = $(this).attr('id').split('-')[1];
var StartDate = $('#revStartDateInput-'+ThisID).datepicker('getDate');
var EndDate = $(this).datepicker('getDate');
if (EndDate <= StartDate) {
var ChosenDate = $.format.date(StartDate, 'dd/MM/yyyy');
var HiddenDate = $.format.date(StartDate, 'yyyy-MM-dd');
}
else{
var ChosenDate = $.format.date(EndDate, 'dd/MM/yyyy');
var HiddenDate = $.format.date(EndDate, 'yyyy-MM-dd');
}
$('#revEndDateInput-'+ThisID).attr('value',ChosenDate);
$('#revEndDate-'+ThisID).attr('value',HiddenDate);
$(this).datepicker('hide');
$(this).datepicker( "setDate", "10/12/2012" );
});
Any ideas?

With this minor change it doesn't loop more than a second time after the date is fixed:
//End date picker
$('.revEndDateInput').datepicker({
format: "dd/mm/yyyy",
startView: "days",
minViewMode: "days",
language: 'pt-BR',
orientation: 'bottom right',
autoclose: 'true'
});
$(".revEndDateInput").datepicker().on('hide', function(){
var ThisID = $(this).attr('id').split('-')[1];
var StartDate = $('#revStartDateInput-'+ThisID).datepicker('getDate');
var EndDate = $(this).datepicker('getDate');
console.log('asd');
if (EndDate < StartDate) {
$(this).datepicker( "setDate", StartDate);
var ChosenDate = $.format.date(StartDate, 'dd/MM/yyyy');
var HiddenDate = $.format.date(StartDate, 'yyyy-MM-dd');
}
else{
var ChosenDate = $.format.date(EndDate, 'dd/MM/yyyy');
var HiddenDate = $.format.date(EndDate, 'yyyy-MM-dd');
}
$('#revEndDateInput-'+ThisID).attr('value',ChosenDate);
$('#revEndDate-'+ThisID).attr('value',HiddenDate);
$(this).datepicker('hide');
}); //changeDate
Thanks for the help everyone.

what #Roko said,, you are hitting the loop,, put your code in onSelect function,, like this
$('.revEndDateInput').datepicker({
format: "dd/mm/yyyy",
startView: "days",
minViewMode: "days",
language: 'pt-BR',
orientation: 'bottom right',
onSelect: function(selectedDate) {
var ThisID = $(this).attr('id').split('-')[1];
var StartDate = $('#revStartDateInput-'+ThisID).datepicker('getDate');
var EndDate = $(this).datepicker('getDate');
if (EndDate <= StartDate) {
var ChosenDate = $.format.date(StartDate, 'dd/MM/yyyy');
var HiddenDate = $.format.date(StartDate, 'yyyy-MM-dd');
}
else{
var ChosenDate = $.format.date(EndDate, 'dd/MM/yyyy');
var HiddenDate = $.format.date(EndDate, 'yyyy-MM-dd');
}
$('#revEndDateInput-'+ThisID).attr('value',ChosenDate);
$('#revEndDate-'+ThisID).attr('value',HiddenDate);
$(this).datepicker('hide');
$(this).datepicker( "setDate", "10/12/2012" )
}
});
see if that fix it
P.S. I have only pasted your code in onSelect callback, you have to match it to your needs

Foundation datepicker - disabling future dates

I am using foundation datepicker and I am trying to disable dates. I am able to disable dates for one field, where dates are disabled from week ago, but I am not able to disable dates that are going from now into the future:
onRender: function (date) {
return date.valueOf() > date.valueOf() ? 'disabled' : '';
}
This is the complete code:
var date = new Date();
var weekBack = new Date(new Date(date).setDate(date.getDate() - 7));
$('#datePicker').fdatepicker({
closeButton: false,
initialDate: weekBack,
format: 'dd.mm.yyyy',
onRender: function (date) {
return date.valueOf() > weekBack.valueOf() ? 'disabled' : '';
},
}).on('changeDate', function (ev) {
var dateFrom = $("#datePicker").val().split(".").reverse().join("-");
var dateTo = $("#datePicker1").val().split(".").reverse().join("-");
timelines(dateFrom, dateTo);
barCharts(dateFrom, dateTo);
});
$('#datePicker1').fdatepicker({
closeButton: false,
initialDate: date,
format: 'dd.mm.yyyy',
onRender: function (date) {
return date.valueOf() > date.valueOf() ? 'disabled' : '';
},
}).on('changeDate', function (ev) {
var dateFrom = $("#datePicker").val().split(".").reverse().join("-");
var dateTo = $("#datePicker1").val().split(".").reverse().join("-");
timelines(dateFrom, dateTo);
barCharts(dateFrom, dateTo);
});

You just set the endDate as following:
var now = new Date();
$("#birthday").fdatepicker({
format: "dd M yyyy",
endDate: now
});
Conversely, if you want to disable the past days, set the startDate:
var now = new Date();
$("#checkin").fdatepicker({
format: "dd M yyyy",
startDate: now
});
Hope this useful!

can that help you?
http://jsfiddle.net/D9C4F/
http://foundation.zurb.com/forum/posts/39753-foundation-datepicker-select-end-date
and that as well?
http://app.thewatchenthusiast.com/themes/base/bower_components/foundation-datepicker/example.html

JQuery date time picker add 5 hours for current time

I need two datetime pickers. In the first picker I need current date and time and in another picker I want to add 5 hours from current time. I tired with below code in jsfiddle. First picker working but second not working properly.
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date();
// for now
datetext=datetext+" "+d.setHours(d.getHours())+": "+d.setMinutes(d.getMinutes());`enter code here`
$('#datepicker1').val(datetext);
},
});
});

Added 5 hour to current time
var d1 = new Date (),
var d2 = new Date ( d1 );
var addedhour=d2.setHours ( d1.getHours() + 5 )

I have modified your code to add 5 hours from current time. Have a look at it :)
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date();
d.setHours(d.getHours() + 5)
// for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker1').val(datetext);
},
});
});

this code is working
$(function() {
$('#datetimepicker').datepicker({
dateFormat: 'mm-dd-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datetimepicker').val(datetext);
},
});
});
$(function() {
$('#datetimepicker1').datepicker({
dateFormat: 'mm-dd-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date( d1 );
var addedhour=d2.setHours (d1.getHours()+5)
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#datetimepicker1').val(datetext);
},
});
});

Try This Code,
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var date2 = new Date();
date2.setHours(date2.getHours()+5);
$('#datepicker1').val(date2);
},
});
});

Bootstrap Date picker

Hey this question might have been asked before, however I haven't been able to find a solution.
I have two bootstrap date pickers. Based on the first date selection the second date should be restricted to the first date + 15.
I would like the vice-versa to happen as well. When a user selects the second date first the first date should be restricted to the second date - 15.
My code so far :
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#inputDate1').datepicker({
onRender: function (date) {
return date.valueOf() > now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
//made changes to condition below
var newDate = new Date(ev.date)
checkout.setValue(newDate);
checkin.hide();
$('#inputDate2')[0].focus();
}).data('datepicker');
var checkout = $('#inputDate2').datepicker({
onRender: function (date) {
//made changes to below line
var after = new Date(checkin.date);
after.setDate(after.getDate() + 14);
if(now.valueOf() > after.valueOf())
{
return (date.valueOf() <= after.valueOf()) && (date.valueOf()>= checkin.date.valueOf()) ? '' : 'disabled';
}
else if(after.valueOf() > now.valueOf())
{
return (date.valueOf() <= now.valueOf()) && (date.valueOf()>= checkin.date.valueOf()) ? '' : 'disabled';
}
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
Any help is appreciated.

Ok i figured out how to do it and here i paste my working code.
$(document).ready(function() {
var nowTemp = new Date();
var end = new Date();
var start;
$('#start').datepicker({
startDate: start,
endDate: end,
autoclose: true
}).on('changeDate', function (e){
var tempdate = new Date(e.date);
var tempdate1 = new Date(e.date);
tempdate1.setDate(tempdate1.getDate() + 15);
$('#end').datepicker('setStartDate', tempdate);
$('#end').datepicker('setEndDate', tempdate1);
});
$('#end').datepicker({
startDate: start,
endDate: end,
autoclose: true
}).on('changeDate', function (e){
var tempdate = new Date(e.date);
var tempdate1 = new Date(e.date);
tempdate1.setDate(tempdate1.getDate() - 15);
$('#start').datepicker('setStartDate', tempdate1);
$('#start').datepicker('setEndDate', tempdate);
});
});

How to sum days to some date

I have an input with some date value and I want to sum 60 days to that that and put that val into other input. How can I do that?
Something like 2012-12-17 in first input and 2013-02-15 in second input
<td width="148"><input name="USER_joindate" id="USER_joindate" type="text" readonly="readonly" value="2012-12-17"></td>
<td><input name="EndPeriodExperience" id="EndPeriodExperience" type="text" readonly="readonly"></td>
$( document ).ready(function() {
$('#USER_joindate').on('change', function() {
....magic ...
});
});

download moment.js from http://momentjs.com/ and try this:
$(document).ready(function() {
$('#USER_joindate').on('change', function() {
// get the value of USER_joindate
var dateString = $(this).val();
// validate the date format inside USER_joindate
if (dateString.match(/^[0-9]{2}-[0-9]{2}-[0-9]{4}$/g)) {
// create a new date object using moment.js
var dateObj = moment(dateString);
// add 60 days to the date
dateObj.add(60, 'days');
// fill EndPeriodExperience with the new date
$("#EndPeriodExperience").val(dateObj.format("YYYY-MM-DD"));
}
});
});

I just find the way, check the fiddle:
$( document ).ready(function() {
$("#USER_joindate").on("change", function(){
var date = new Date($("#USER_joindate").val()),
days = parseInt($("#days").val(), 10);
if(!isNaN(date.getTime())){
date.setDate(date.getDate() + 61);
//2012-12-17
$("#EndPeriodExperience").val(date.toInputFormat());
} else {
alert("Fecha Invalida");
$("#USER_joindate").focus();
}
});
Date.prototype.toInputFormat = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString();
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]);
};
});
Thanks to all for your answers!