We Keep Coding

Javascript/Jquery-UI make reusable function that checks if dateTo is after dateFrom

I have 2 datepickers. #datepicker0 and #datepicker1 and the following code to check if the date_from is after date_to:
$('#datepicker0').datepicker({
dateFormat: 'yy-mm-dd'
});
var valeDate = {
dateFormat: 'yy-mm-dd',
onSelect: function() {
if ($('#datepicker0').val() > $(this).val()) {
alert("Date problem");
$(this).val(null)
}
$(this).change();
}
}
$("#datepicker1").datepicker(valeDate).on("change", function() {
display("Change event");
I would like to remove the parameter #datepicker0 from the onSelect function in order to make the function reusable.
Could anyone show me how to make it?

function validateDate(datepicker, value) {
if (value > datepicker.val()) {
alert("Date problem")
datepicker.val(null)
}
datepicker.change()
}
var valeDate = {
dateFormat: 'yy-mm-dd',
onSelect: function() {
validateDate($(this), $('#datepicker0').val())
}
}
Next time, please address questions like this (everything works but code require modifications) to code review (https://codereview.stackexchange.com/)

finally i used this code:
function datepickerValidator(startDate,endDate) {
var datepickerFrom = startDate;
var datepickerTo = endDate;
// returns the millisecond obtained from the string 'dd-mm-yy'
function getTimeMillis(dateString) {
var splittedFrom = dateString.split("-");
var day = splittedFrom[0];
var month = splittedFrom[1];
var year = splittedFrom[2];
var dateTmp = new Date(year + "-" + month + "-" + day);
var timeMillis = dateTmp.getTime();
return timeMillis;
}
var validateDatePickerOption = {dateFormat: 'dd-mm-yy',
onSelect: function() {
from = getTimeMillis(datepickerFrom.val());
to = getTimeMillis($(datepickerTo).val());
if ( from > to ) {
alert("Date problem: value 'To' must be after 'From'");
$(this).val(null)
}
}
}
return validateDatePickerOption;
}
and for each datepicker:
var from = $("#From");
var to = $("#To");
var datepickerOption = datepickerValidator(from,to);
from.datepicker(datepickerOption);
to.datepicker(datepickerOption);

Opening TO date, after selecting FROM date in datepicker range using each

I got a calendar range on a page, consisting of two inputs, #from-date and #to-date. If I select from date, I want the to date to be shown automatically.
HTML markup:
<div class="calendar-range">
<div class="filter-first date-from">
<input type="text" id="from-date" class="form-control form-control-main calendar-from datepicker">
<i class="fa fa-calendar"></i>
</div>
<div class="filter date-to">
<input type="text" id="to-date" class="form-control form-control-main calendar-to datepicker">
<i class="fa fa-calendar"></i>
</div>
</div>
This is the jQuery code:
body.find(".calendar-range").each(function (index, callback) {
var selectedToElement = $(this).find('.calendar-to');
var selectedToDay = selectedToElement.datepicker('getDate');
var selectedFromElement = $(this).find('.calendar-from');
var selectedFromDay = selectedFromElement.datepicker('getDate');
var numberOfMonths = 2;
if (body.width() < 768) {
numberOfMonths = 1;
}
var settings = {
changeMonth: false,
numberOfMonths: numberOfMonths,
dateFormat: dateFormat,
minDate: new Date(Date.now()),
maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
onSelect: function (dateText, object) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
selectedToElement.change();
selectedFromElement.change();
if ($(this).hasClass('calendar-from')) {
to.datepicker("option", "minDate", getDate(this.value));
} else if ($(this).hasClass('calendar-to')) {
from.datepicker("option", "maxDate", getDate(this.value));
}
},
beforeShow: function (input, inst) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
},
beforeShowDay: function (date) {
var d = date.getTime();
var cssClass = 'selected-date-range';
var defaultClass = '';
if (selectedToDay != null && d == selectedToDay.getTime()) {
cssClass = cssClass + ' selected-date-range-last';
defaultClass = defaultClass + ' selected-date-range-last';
} else if (selectedFromDay != null && d == selectedFromDay.getTime()) {
cssClass = cssClass + ' selected-date-range-first';
defaultClass = defaultClass + ' selected-date-range-first';
}
if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) {
return [true, cssClass, ''];
}
return [true, defaultClass, ''];
},
onClose: function (input, object) {
if (object.id === "from-date") {
to.datepicker("show");
}
}
};
var from = selectedFromElement.datepicker(settings);
var to = selectedToElement.datepicker(settings);
});
I tried solving it with onClose, but this seems to iterate twice, and close the opened #to-date too. Is it possible to implement it without separating the two datepickers? (also something really weird happens with hiding/showing the datepickers)
Help appreciated, thx.

There are a number of improvements you can make. Here is a working example:
https://jsfiddle.net/Twisty/mcqra47o/
JavaScript
$(function() {
var body = $("body");
var dateFormat = "mm/dd/yy";
$(".calendar-range").each(function(index, callback) {
var selectedToElement = $(this).find('.calendar-to');
var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date;
var selectedFromElement = $(this).find('.calendar-from');
var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date;
var numberOfMonths = 2;
if (body.width() < 768) {
numberOfMonths = 1;
}
var settings = {
changeMonth: false,
numberOfMonths: numberOfMonths,
dateFormat: dateFormat,
minDate: 0,
maxDate: "+1y",
onSelect: function(dateText, object) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
/*
selectedToElement.change();
selectedFromElement.change();
*/
if ($(this).hasClass('calendar-from')) {
selectedToElement.datepicker("option", "minDate", dateText);
} else if ($(this).hasClass('calendar-to')) {
selectedFromElement.datepicker("option", "maxDate", dateText);
}
},
beforeShow: function(input, inst) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
},
beforeShowDay: function(date) {
var d = date.getTime();
var cssClass = 'selected-date-range';
var defaultClass = '';
if (selectedToDay != null && d == selectedToDay.getTime()) {
cssClass = cssClass + ' selected-date-range-last';
defaultClass = defaultClass + ' selected-date-range-last';
} else if (selectedFromDay != null && d == selectedFromDay.getTime()) {
cssClass = cssClass + ' selected-date-range-first';
defaultClass = defaultClass + ' selected-date-range-first';
}
if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) {
return [true, cssClass, ''];
}
return [true, defaultClass, ''];
},
/*
onClose: function(input, object) {
if (object.id === "from-date") {
to.datepicker("show");
}
}
*/
};
var from = selectedFromElement.datepicker(settings);
var to = selectedToElement.datepicker(settings);
});
});
First, we should not call .datepicker() to getDate before it's been initialized. So to set the following variables early, we can do this:
var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date;
var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date;
For minDate and maxDate, we can check the API and see:
Multiple types supported:
Date: A date object containing the minimum date.
Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
I suggest using relative date formats if possible. For today, I used 0, and for 1 year, I used "+1y".
When a selection is made change is fired anyway, so I commented this out. If it is needed for something else, I would suggest looking at .tragger("change").
The onSelect option passes dateText in, so we can use that to set the new minDate and maxDate as needed.
Hopefully that addresses everything and works as you'd desired.

Stuck trying to get datepicker to play nice with a set date for second date picker

Question is I have two date pickers what called leave_start the other leave_end. I have some custom things going on to block out weekends and set a minDate as today and also block out custom holidays. I however cant seem to figure out why I cant grab the val date from the first date picker(leave_start) and set it as a minDate in my second datepicker(leave_end). Everything else works great just cant seem to get this to work. Any help would be greatly appreciated!
Side note this is a ruby on rails app
Using jquery datepicker.
Here is my Application.js
$(document).ready(function() {
var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
var start = $("#leave_start").val();
$('#leave_start').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_end').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: start,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
}):

You can set a change event handler on the first datepicker to update minDate of the second.
Simple Example:
$('#date1').datepicker();
$('#date2').datepicker();
$('#date1').change(function() {
$( "#date2" ).datepicker( "option", "minDate", $('#date1').val() );
});
See working demo: http://jsfiddle.net/ddan/jon3xt3e/1/
EDIT
Example using your settings and javascript:
$(document).ready(function() {
var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
var start = $("#leave_start").val();
$('#leave_start').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_end').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: start,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_start').change(function() {
$( "#leave_end" ).datepicker( "option", "minDate", $('#leave_start').val() );
});
});
Working example: http://jsfiddle.net/ddan/jon3xt3e/2/

Use the onSelect method of the first to change the option of the second. your current attempt will only get the value of the input on page load so it requires binding to events to make the changes as well as using the API to change options
function beforeShow(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
$(function() {
var start = $("#leave_start").val();
$('#leave_start').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(date, ui) {
$leave.datepicker('option', {'minDate': date});
},
beforeShowDay: beforeShow
});
var $leave = $('#leave_end').datepicker({
minDate: start,
dateFormat: "yy-mm-dd",
onSelect: function(d, ui) {
//do something when leave selected
},
beforeShowDay: beforeShow
});
});
Also note that you have beforeShowDay property twice in your plugin definition objects
DEMO

how to disable previous month in Full Calendar Plugin

I want to disable previous month button from full calander
Current month is April. When i clicked on previous button then calendar is showing previous March month. should not be happened.
http://jsfiddle.net/6enYL/
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title'
},
selectable: true,
selectHelper: true,
editable: true
});
});

Yep, I've modified your fiddle with lewsid's answer, and it works.
http://jsfiddle.net/6enYL/1/
jQuery('#calendar').fullCalendar({
viewDisplay : function(view) {
var now = new Date();
var end = new Date();
end.setMonth(now.getMonth() + 11); //Adjust as needed
var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
var cur_date_string = now.getMonth()+'/'+now.getFullYear();
var end_date_string = end.getMonth()+'/'+end.getFullYear();
if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }
if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
}
});

Disable past dates and view starts from today
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
firstDay :moment().weekday(),
viewRender: function(currentView){
var minDate = moment();
// Past
if (minDate >= currentView.start && minDate <= currentView.end) {
$(".fc-prev-button").prop('disabled', true);
$(".fc-prev-button").addClass('fc-state-disabled');
}
else {
$(".fc-prev-button").removeClass('fc-state-disabled');
$(".fc-prev-button").prop('disabled', false);
}
}
});

FullCalendar is not like a traditional DatePicker. There is no way to initially setup the start and end dates of what you want to show.
You have to attach to viewRender event and manipulate the calendar with logic of your own. So if the dates are less than what you want you attach a class to that tile of 'disabled' for example. And also disable the previous button your self. You also then have to re-enable the previous button on the next month. Thanks to this kind of API you build your own custom calendar, but it can take time.
FullCalendar is just a calendar. The rest is up to you.
Here is an update based on Prasad19sara answer : http://jsfiddle.net/6enYL/2/
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title'
},
selectable: true,
selectHelper: true,
editable: true,
viewDisplay: function (view) {
//========= Hide Next/ Prev Buttons based on date range
if (view.end > endDate) {
$("#calendar .fc-button-next").hide();
return false;
}
else {
$("#calendar .fc-button-next").show();
}
if (view.start < startDate) {
$("#calendar .fc-button-prev").hide();
return false;
}
else {
$("#calendar .fc-button-prev").show();
}
}
});
Please be aware that viewDisplay is deprecated and will no longer be used in V2

This is my simple solution.
Place this code in the renderView function (around line 368 in version 1.5.4)) before ignoreWindowResize--; near the end of the function.
var lammCurrentDate = new Date();
var lammMinDate = new Date( lammCurrentDate.getFullYear(), lammCurrentDate.getMonth(), 1, 0, 0, 0, 0);
if (currentView.start <= lammMinDate){
header.disableButton('prev');
} else {
header.enableButton('prev');
}

For those using the FullCalendar.io version 2, you may use the following code
viewRender: function(view) {
var now = new Date();
var end = new Date();
end.setMonth(now.getMonth() + 1);
var cal_date_string = view.start.format('MM')+'/'+view.start.format('YYYY');
var cur_date_string = now.getMonth()+'/'+now.getFullYear();
var end_date_string = end.getMonth()+'/'+end.getFullYear();
if(cal_date_string == cur_date_string) { jQuery('.fc-prev-button').addClass("fc-state-disabled"); }
else { jQuery('.fc-prev-button').removeClass("fc-state-disabled"); }
if(end_date_string == cal_date_string) { jQuery('.fc-next-button').addClass("fc-state-disabled"); }
else { jQuery('.fc-next-button').removeClass("fc-state-disabled"); }
},

header:{
left: 'title',
center: '',
right: 'today prev,next'
},
Just remove "prev"... http://fullcalendar.io/docs/display/header/
in your options

If you have looking for a more recent solution (v4-compatible), look for validRange
See documentation : https://fullcalendar.io/docs/validRange

In version v2 simply set the header without the option.
Like this for example:
header: {
center: "title",
right: "month,agendaWeek,agendaDay"
},

$('#calendar').fullCalendar({
businessHours: {
start: '10:00', // a start time
end: '22:00', // an end time
dow: [ 1, 2, 3, 4, 5 ]
// days of week. an array of zero-based day of week integers (0=Sunday)
},
hiddenDays: [ 0, 6 ],
defaultView: 'agendaWeek',
viewRender: function(view) {
var now = new Date();
var end = new Date();
end.setMonth(now.getMonth() + 2);
//========= Hide Next/ Prev Buttons based on date range
if (view.end > end) {
$("#calendar .fc-next-button").hide();
return false;
}
else {
$("#calendar .fc-next-button").show();
}
if (view.start < now) {
$("#calendar .fc-prev-button").hide();
return false;
}
else {
$("#calendar .fc-prev-button").show();
}
}
});

How to Add a day on jquery calendar

I am using this code to create a jquery calendar on my page
$(function(){
//set the datepicker
var dateToday = new Date();
$('#pikdate').datetimepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});
});
how to add a day in this calendar that calendar should be start from after 24 hour.

You can do like this.
$('#pikdate').datepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});

You could add a day in the date you are setting as "minDate".
See the example here (I changed your code):
$(function(){
//set the datepicker
var dateToday = new Date();
dateToday.addDays(1); // it will add one day to the current date (ps: add the following functions)
$('#pikdate').datetimepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});
});
But to make the "addDays" function work you must create the function as you can see down.
I always create 7 functions, to work with date in JS: addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addYears.
You can see an example here: http://jsfiddle.net/tiagoajacobi/YHA8x/
This are the functions:
Date.prototype.addSeconds = function(seconds) {
this.setSeconds(this.getSeconds() + seconds);
return this;
};
Date.prototype.addMinutes = function(minutes) {
this.setMinutes(this.getMinutes() + minutes);
return this;
};
Date.prototype.addHours = function(hours) {
this.setHours(this.getHours() + hours);
return this;
};
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};
Date.prototype.addWeeks = function(weeks) {
this.addDays(weeks*7);
return this;
};
Date.prototype.addMonths = function (months) {
var dt = this.getDate();
this.setMonth(this.getMonth() + months);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
Date.prototype.addYears = function(years) {
var dt = this.getDate();
this.setFullYear(this.getFullYear() + years);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
They are propotype functions it means that every variable from the type "Date" will have this functions.