We Keep Coding

Why date difference start with zero

Implemented start date and end date to find the day difference. If i select start date today and end date today then difference is showing that 0 and i have disabled the weekends though its counting the weekends also. Here is my code.
$("#startDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
todayHighlight: true,
minDate: 0,
numberOfMonths: 1,
todayHighlight: true,
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
$("#endDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
endDate: true,
todayHighlight: true,
minDate: 0,
numberOfMonths: 1,
buttonImageOnly: true,
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate');
var start = $("#startDate").datepicker("getDate");
var end = $("#endDate").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#noofDays").val(days);
}
});

Used date difference calculation function in jquery. its working for me
$("#startDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
numberOfMonths: 1,
maxDate: '+1Y+6M',
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
$("#endDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
numberOfMonths: 1,
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
var start = $("#startDate").datepicker("getDate");
var end = $("#endDate").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#noofDays").val(days);
}
});

jQuery UI datepicker "defaultDate" selects a weekend date despite "noWeekend" active

I have two jQuery UI date pickers on a form I am building. Most of the functionality is working as expected, except for one thing.
I have weekends disabled on both dates. However, when the defaultDate and minDate lands on a weekend, it doesn't select the next available week day but, rather, it still selects the weekend date.
Any help would be really appreciative :)
var dateFormat = "dd/mm/yy",
from = $("#from")
.datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
minDate: "+3d",
defaultDate: "+3d",
changeMonth: true
})
.on("change", function () {
var date2 = from.datepicker('getDate')
date2.setDate(date2.getDate() + 2)
to.datepicker('setDate', date2)
to.datepicker('option', 'minDate', date2)
}),
to = $("#to").datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "+1w",
minDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
UPDATE
I have solved the issue. Here is the answer for if anyone else is interested. I updated the day number (0-6) the selected date lands on and added so many days to it to avoid the weekend and stored this in a variable min. I then assigned the min variable to the defaultDate and minDate datepicker options :).
var min = 3;
switch (new Date().getDay()) {
case 3:
min = 5;
break;
case 4:
min = 4;
break;
}
var dateFormat = "dd/mm/yy",
from = $("#from")
.datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
minDate: min,
defaultDate: min,
changeMonth: true
})
.on("change", function () {
var date2 = from.datepicker('getDate')
min = 2
switch (date2.getDay()){
case 4:
min = 4;
break;
case 5:
min = 4;
break;
}
date2.setDate(date2.getDate() + min)
to.datepicker('setDate', date2)
to.datepicker('option', 'minDate', date2)
}),
to = $("#to").datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "+1w",
minDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})

Bootstrap datetimepicker showing two calendar months

Here it looks like:
I want it to just show one month with it ranging the dates from the minDate to maxDate. And this works good but it is showing two views for some reason..
Here is the JS:
var maxDate = new Date();
var minDate = $("#from").val();
var datePickerLimits= $("#from, #to").datetimepicker({
minDate: minDate,
maxDate: maxDate,
pickTime: false,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datetimepicker"),
date =
$.datetimepicker.parseDate(instance.settings.dateFormat ||
$.datetimepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datetimepicker("option", option, date);
}
});
Rails:
= text_field_tag :from_js, l((params[:from].to_datetime or
#item.date), format: :american_no_time), class: 'form-control
input-sm datetimepicker', id: 'from'
= text_field_tag :to_js, l((params[:to].to_datetime or
#item.date_end), format: :american_no_time), class: 'form-control
input-sm datetimepicker', id: 'to'
This is used with rails but it seems to be happening in the JS as the only thing that is being called is the class datetimepicker.

Add Startdate and EndDate in date picker
var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
In your script add
var today = new Date(); //Get today's date
var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); //To get the last date of today's month
$("#datepicker").datepicker({
startDate: today,
endDate: lastDate
});

This fixed the problem.
var maxDate = new Date();
var minDate = $("#from").val();
$(function () {
$('#from').datetimepicker({
minDate: minDate,
maxDate: maxDate,
pickTime: false
});
$('#to').datetimepicker({
minDate: minDate,
maxDate: maxDate,
pickTime: false
});
});

setDate in jQuery UI DatePicker

When I use setDate with dateFormat : 'yy-mm', jQuery UI DatePicker shows today's date and not the date specified in setDate.
Example: http://jsfiddle.net/DBpJe/7981/ (edited from https://stackoverflow.com/a/2209104/5568549)
But with dateFormat : 'yy-mm-dd' it shows the date specified in setDate.
Example: http://jsfiddle.net/DBpJe/7982/
How to make jQuery UI DatePicker shows the date specified in setDate with dateFormat : 'yy-mm' ?

Found a solution from jQuery UI DatePicker to show month year only
Working Example for dateFormat : 'yy-mm' : http://jsfiddle.net/DBpJe/8057/
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(0, 4);
month = datestr.substring(datestr.length-2, datestr.length);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
}
}

Found an article that addressed this exactly: http://www.jquerybyexample.net/2012/06/show-only-month-and-year-in-jquery-ui.html
Working Example: http://jsfiddle.net/Twisty/xwnoafxd/
Basically you just had to add defaultDate setting. One of those facepalm things.
$(function() {
var myDate = new Date(2000, 6, 1);
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm',
defaultDate: myDate,
onClose: function(dateText, inst) {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
console.log('Done is pressed')
}
}
}).datepicker("setDate", myDate);
});

Setting max date value to current date OR 1 year from start date

What should I do to restrict the user to select the end date beyond one year from the starting date OR the current date. I have my codes like this.
$(function () {
$('#DateFrom').datepicker({
dateFormat:'d-M-y',
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 7, 23),
maxDate: 0,
onSelect: function() {
var date = $('#DateFrom').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24*365));
$('#DateTo').datepicker('option', 'maxDate', date);
$('#DateTo').datepicker('option', 'minDate',$('#DateFrom').datepicker('getDate'));
displayToUser();
},
});
$('#DateTo').datepicker({
dateFormat:'d-M-y',
maxDate: 0,
changeMonth: true,
changeYear: true,
onSelect: displayToUser,
});
});
function displayToUser() {}
Here although it restricts the user within one year from starting date, but it allows the user to select dates beyond the current date.
Example: if start date is 23-01-2016, it allows to select the end date upto 22-01-2017. I want it to be at most today's date.

Does this do it?
$(function () {
$('#DateFrom').datepicker({
dateFormat:'d-M-y',
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 7, 23),
maxDate: 0,
onSelect: function() {
var date = $('#DateFrom').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24*365));
var todaysDate = new Date();
if(date.getTime() > todaysDate.getTime()) date = todaysDate;
$('#DateTo').datepicker('option', 'maxDate', date);
$('#DateTo').datepicker('option', 'minDate',$('#DateFrom').datepicker('getDate'));
displayToUser();
},
});
$('#DateTo').datepicker({
dateFormat:'d-M-y',
maxDate: 0,
changeMonth: true,
changeYear: true,
onSelect: displayToUser,
});
});
function displayToUser() {}
I only added these two lines
var todaysDate = new Date();
if(date.getTime() > todaysDate.getTime()) date = todaysDate;