Bootsstrap calender start date - javascript

how to set start date 1 week after?
I'm using this calender http://www.eyecon.ro/bootstrap-datepicker/` var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');`

Use this to set the variable "now" to 7 days after the current date:
var nowTemp=new Date();
var oneWeekAfter = new Date();
oneWeekAfter.setDate(nowTemp.getDate()+7);
oneWeekAfter.getDate();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), oneWeekAfter.getDate(), 0, 0, 0, 0);

Related

JQuery Doesn't Respond After Swal Alert

I am having a problem with my JQuery code, after swal alert, it doesn't append value to the inputs.
What I do first I check if the value of the start_date is Empty if yes then swal alert, then when I select it the values won't append to the boxes...
function ChangeDate() {
debugger;
var Startdate = document.getElementById("lease_stattdate").value;
var thisDate = new Date(Startdate);
var month = thisDate.getMonth();
var year = thisDate.getFullYear();
var dateSelected = thisDate.getUTCDate();
var firstDay = 1;
var LastDate = new Date(year, month + 1, 0);
var LastDay = LastDate.getDate();
var today = new Date();
var TodayMonth = today.getMonth();
var date = true;
if (month <= TodayMonth) {
jQuery.noConflict();
swal("Error!", "Please select upcoming month!", "warning");
$('#lease_stattdate').val('');
$('#renewal_notice').val('');
$('#end_date').val('');
$('#termination_notice').val('');
window.location.reload();
}
if (month > TodayMonth && dateSelected > firstDay) {
jQuery.noConflict();
swal("Error!", "Please select first day of the month!", "warning");
$('#lease_stattdate').val('');
$('#renewal_notice').val('');
$('#end_date').val('');
$('#termination_notice').val('');
window.location.reload();
}
if (month > TodayMonth && dateSelected == firstDay) {
var tempday = 15;
var nextdate = new Date(year, month + 23, tempday);
var NXmonth = nextdate.getMonth();
var NXyear = nextdate.getFullYear();
var terminateday = new Date(NXyear, NXmonth + 1, 0).getDate();
var exitdate = new Date(NXyear, NXmonth, terminateday).toLocaleDateString('en-ZA');
var renewalNotice = new Date(NXyear, NXmonth-2, 1).toLocaleDateString('en-ZA');
var terminationNotice = new Date(NXyear, NXmonth, 1).toLocaleDateString('en-ZA');
$('#renewal_notice').val(renewalNotice);
$('#end_date').val(exitdate);
$('#termination_notice').val(terminationNotice);
}
}

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

Categories