Foundation datepicker - disabling future dates - javascript

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

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

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

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

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