Jquery Datepicker throws Error on setDate - javascript

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

Related

Date-Picker and Time-Picker Query

In PHP I have a two textbox, one for date-picker and second for time-picker.
In this, If I select today's date at 2 PM then in 2nd timepicker textbox disable time before 2PM in PHP.
Any help would be appreciated.
For Time picker ::
$('#startTime').timepicker({
'minTime': '6:00am',
'maxTime': '11:30pm',
'onSelect': function () {
$('#endTime').timepicker('option', 'minTime', $(this).val());
}
});
For Date Picker :
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#dt2').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#dt2').datepicker('option', 'minDate', date2);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
});

Bootstrap datetime picker adding months instead of days

I have the following code snippet in jsfiddle. I'm trying to add given number as days to the calendar.
HTML Code:
<input id="firstDate"/>
<input type="hidden" value="11" id="days">
<br/>
<input id="secondDate"/>
Javascript:
<script>
var pickerOptsGeneral = {
format: "dd/mm/yyyy",
autoclose: true,
minView: 2,
maxView: 2
};
$('#firstDate')
.datetimepicker(pickerOptsGeneral)
.on('changeDate', function(ev){
var days = document.getElementById("days").value;
var oldDate = new Date(ev.date);
var newDate = new Date();
newDate.setDate(oldDate.getDate() + days);
secondDate.val(newDate.getDate()+"/"+(newDate.getMonth()+1)+"/"+newDate.getFullYear());
secondDate.datetimepicker('update');
});
var secondDate = $('#secondDate').datetimepicker(pickerOptsGeneral);
</script>
The above code is adding months instead of days. If i select the date
01/06/2017 the output will be 19/9/2017
If I hardcode the date:
newDate.setDate(oldDate.getDate() + 11);
This will give me the output I want. Can anyone help me on this ?
try this...
var pickerOptsGeneral = {
format: "dd/mm/yyyy",
autoclose: true,
minView: 2,
maxView: 2
};
$('#firstDate')
.datetimepicker(pickerOptsGeneral)
.on('changeDate', function(ev){
var days = parseInt(document.getElementById("days").value);
var oldDate = $("#firstDate").data("datetimepicker").getDate();
var oldDateOriginal = new Date(oldDate);
var newDate = new Date(oldDateOriginal);
newDate.setDate(newDate.getDate() + days);
secondDate.val(newDate.getDate()+"/"+(newDate.getMonth()+1)+"/"+newDate.getFullYear());
secondDate.datetimepicker('update');
});
var secondDate = $('#secondDate').datetimepicker(pickerOptsGeneral);
JSFfiddle link for same - http://jsfiddle.net/sdyoxx2r/9/
When you get the value of <input type="hidden" value="11" id="days" /> it will return value as string.
So you need to convert value of days from string to integer .
var pickerOptsGeneral = {
format: "dd/mm/yyyy",
autoclose: true,
minView: 2,
maxView: 2
};
$('#firstDate').datetimepicker(pickerOptsGeneral).on('changeDate',function(ev){
var days = parseInt($('#days').val());
var oldDate = new Date(ev.date);
var newDate = new Date();
newDate.setDate(oldDate.getDate() + days);
secondDate.val(newDate.getDate()+"/"+newDate.getMonth()+1)+"/"+newDate.getFullYear());
secondDate.datetimepicker('update');
});
var secondDate = $('#secondDate').datetimepicker(pickerOptsGeneral);

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 picker to only select mondays

I have the following jQuery which gives me the current date and the populates the enddate 7 days from the selected date. I would like for the user to only be able to select mondays from the datepicker. Can this be done the way in which I have my code?
$(document).ready(function () {
$("#WeekCommencing").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
// MondayOnly: function(date){ return[(date.getDate() == 1),""];},
onSelect: function (date) {
var date2 = $('#WeekCommencing').datepicker('getDate');
date2.setDate(date2.getDate() + 7);
$('#WeekEnding').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#WeekEnding').datepicker('option', 'minDate', date2);
}
});
$('#WeekEnding').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#WeekCommencing').datepicker('getDate');
console.log(dt1);
var dt2 = $('#WeekEnding').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#WeekEnding').datepicker('option', 'minDate');
$('#WeekEnding').datepicker('setDate', minDate);
}
}
});
});
You should add as function name beforeShowDay
beforeShowDay : function(date){ return[(date.getDay() == 1),""];}, //Monday Only Function
and that should work.

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

Categories