Jquery calculate days with datepicker - javascript

How is it possible to calculate the total days using interval intitial and final DatePicker. Sorry for my bad english
$(".datepicker").datepicker({
minDate: 0,
numberOfMonths: [3,1],
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker();
} else if( selectedDate < date1 ) {
$("#input2").val( $("#input1").val() );
$("#input1").val( dateText );
$(this).datepicker();
} else {
$("#input2").val(dateText);
$(this).datepicker();
}
}
});
http://jsfiddle.net/sWbfk

One way to compute date difference in days is the following:
var t1 = Date.parse($("#input1").val()); // date1.getTime();
var t2 = Date.parse($("#input2").val()); // date2.getTime();
var difference = Math.abs(t2 - t1) / 86400000;
$("#diff").val(difference);
(I tested by putting the code as the last lines of onSelect: function(dateText, inst)).
86400000 is the computed for 24h x 60min x 60s x 1000ms (number of milliseconds in a day)

When you are dealing with dates you should look into moment.js.
You can try something like this:
Moment
moment($("#input1").val()).diff(moment(selectedDate), "days");
Pure JS
var d1 = new Date(date1);
var d2 = new Date(selectedDate);
var secInDays = 24 * 60 * 60 * 1000;
d1.setHours(0, 0, 0, 0);
d2.setHours(0, 0, 0, 0);
console.log((+d2 - +d1) / secInDays)

Related

Calculating national holidays and weekends in jquery datepicker

I am stuck in between with my problem of "How to calculate the days between the dates excluding the Weekends(SAT,SUN) and the National Holidays." and really struggling to calculate the weekends and nationaldays holidays both as the same time.
Any Help would be severely appreciated.
I have arrived to the conclusion in my code , that i am getting the calculated days where i am able to exclude the weekends , but not the national holidays, I have tried to built but failed. Please let me know how to calculate both the weekends and national holidays simultaneously.
This is my html code:
<label>Leave From</label>
<input name="from" id="from" type="text" class="form-control" value="" / >
</div>
<div class="form-group" id="to_date">
<label>To</label>
<input name="to" id="to" type="text" class="form-control" >
</div>
<input type="text" id="hasil" name="hasil" readonly />
This is my script:
<script>
var disabledDays = ["3-24-2015", "3-25-2015"];
function nationalDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
$(function () {
$("#from").datepicker({
minDate:0,
changeMonth: true,
constrainInput: true,
numberOfMonths: 1,
beforeShowDay: $.datepicker.noWeekends,
onSelect: calculateDays,
onClose: function (selectedDate) {
var day = $("#from").datepicker('getDate');
$("#to").datepicker("option", "minDate", selectedDate);
},
}).on("changeDate",function(ev){
var fromdate = new Date(ev.date);
fromdate.setMonth(fromdate.getMonth()+1);
var finaldate = fromdate.getFullYear()+"-"+fromdate.getMonth()+"-"+fromdate.getDate();
console.log(finaldate);
$("#fromdate").val(finaldate);
});
});
$(function () {
$("#to").datepicker({
minDate:0,
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
constrainInput: true,
numberOfMonths: 1,
onSelect: calculateDays,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
},
}).on("changeDate",function(ev){
var todate = new Date(ev.date);
todate.setMonth(todate.getMonth()+1);
var finaldate = todate.getFullYear()+"-"+todate.getMonth()+"-"+todate.getDate();
console.log(finaldate);
$("#todate").val(finaldate);
});
});
function calculateDays(startDate, endDate) {
var form = this.form
var startDate = document.getElementById("from").value;
var startDate = new Date(startDate);
var endDate = document.getElementById("to").value;
var endDate = new Date(endDate);
startDate.setHours(0, 0, 0, 1); // Start just after midnight
endDate.setHours(23, 59, 59, 999); // End just before midnight
var oneDay = 24 * 60 * 60 * 1000;
var diff = endDate - startDate; // Milliseconds between datetime objects
var days = Math.ceil(diff / oneDay);
var weeks = Math.floor(days / 7);
var days = days - (weeks * 2);
// Handle special cases
var startDay = startDate.getDay();
var endDay = endDate.getDay();
// Remove weekend not previously removed.
if (endDate < startDate) {
return 0;
}
if (startDay - endDay > 1) days = days - 2;
if (days) document.getElementById("hasil").innerHTML = days;
$("#hasil").val(days);
}
</script>
Here is the link to jsfiddle: https://jsfiddle.net/8ww4noja/2/

Calculate date from jquery datepicker

I am calculating the age from jquery datepicker. But this works when only the date is in(mm/dd/yy) format. I need to get this working in dd/mm/yy.
//Code
$('#dob').datepicker({
onSelect: function(value, ui) {
var today = new Date(),
dob = new Date(value),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').text(age);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true
});
If i try to set dateFormat: 'mm/dd/yy' in the property this wont work.
Any help?
Demo Fiddle mm/dd/yy Demo Fiddle dd/mm/yy
jQuery
onSelect: function (value, ui) {
var today = new Date();
var format = value.split("/");
var dob = new Date(format[2], format[0], format[1]);
var diff = (today - dob);
var age = Math.floor(diff / 31536000000);
$('#age').text(age);
},
Reference
Hope it helps....
Try this:
http://jsfiddle.net/lotusgodkk/GCu2D/120/
Js:
$('#dob').datepicker({
onSelect: function(value, ui) {
console.log(ui.selectedYear)
var today = new Date(),
dob = new Date(value),
age = ui.selectedYear - 1970; //This is the update
$('#age').text(age);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true,
});
If you inspect the ui object in console, you'll see that it stores year,day,month separately. You can access them like ui.selectedDay or selectedYear . Hope this helps.
this answer will work fine for the all the dates as the month starts from 0 in date function. for date format(dd-mm-yy).
var now= new Date();
var year= now.getFullYear();
$('#dob').datepicker({
onSelect: function (value, ui) {
var today = new Date();
console.log(today.getFullYear());
var format = value.split("-");
console.log(format[2]);
var dob = new Date(format[2], format[1]-1, format[0]);
console.log(dob);
var diff = (today - dob);
var age = Math.floor(diff / 31536000000);
$('#age').text(age);
},
dateFormat: 'dd-mm-yy',
maxDate: '+0d',
yearRange: '1920:'+year,
changeMonth: true,
changeYear: true
});
$("#dob").datepicker({
onSelect: function (value, ui) {
debugger
var today = new Date();
var year = today.getFullYear() - ui.selectedYear;
var month = today.getMonth() - ui.selectedMonth;
var date = today.getDate() - ui.selectedDay;
if ((year == 0 && month == 0 && date < 0) || (year == 0 && month < 0) || (year < 0)) {
$("#lbl6").show();
$("#age").val("");
} else if ((year == 0) || (year > 0 && month == 0 && date >= 0) || (year > 0 && month > 0)) {
$("#age").val(year);
} else if ((year > 0 && month == 0 && date < 0) || (year > 0 && month < 0)) {
$("#age").val(year - 1);
}
},
dateFormat: 'dd M y',
changeMonth: true,
changeYear: true,
yearRange: '1900:2020'
});

jQuery datepicker highlight range loop

I would like to highlight date ranges on a jQuery datepicker.
var dates = new Array();
dates[0] = [new Date(2014,2,23), new Date(2014,2,30)];
dates[1] = [new Date(2014,2,13), new Date(2014,2,20)];
$(function() {
$('#datepicker').datepicker({
numberOfMonths: 1,
minDate: '-0m',
beforeShowDay: function (date) {
for (i=0;i<dates.length;i++) {
var date1 = dates[i][0];
var date2 = dates[i][1];
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
}
}
})
});
The above doesn't work since only one range is visible. How can I get a loop going so that it highlights more than one range? Thanks for your help!
Fiddle
The problem is that you have the return inside the loop
for that reason on the end of the first loop the function is returning true or false
You should do something like:
var dates = new Array();
dates[0] = [new Date(2014,2,23), new Date(2014,2,30)];
dates[1] = [new Date(2014,2,13), new Date(2014,2,20)];
$(function() {
$('#datepicker').datepicker({
numberOfMonths: 1,
minDate: '-0m',
beforeShowDay: function (date) {
var bool = true;
for (i=0;i<dates.length;i++) {
var date1 = dates[i][0];
var date2 = dates[i][1];
bool = bool && date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : "";
}
return bool;
}
})
});
Try
var dates = new Array();
dates[0] = [new Date(2014, 2, 23), new Date(2014, 2, 30)];
dates[1] = [new Date(2014, 2, 13), new Date(2014, 2, 20)];
$(function () {
$('#datepicker').datepicker({
numberOfMonths: 1,
minDate: '-0m',
beforeShowDay: function (date) {
var flag = false,
date1, date2, i;
for (i = 0; i < dates.length; i++) {
date1 = dates[i][0];
date2 = dates[i][1];
flag = (!date1 || date.getTime() >= date1.getTime()) && (!date2 || date.getTime() <= date2.getTime())
if (flag) {
break;
}
}
return [true, flag ? "dp-highlight" : ""];
}
})
});
Demo: Fiddle

Jquery-ui-1.7.2 Want to Highlight dates between pickup and return date

i am using Jquery-ui 1.7.2 calendar in my project. I have Jquery-ui-1.7.2.js and Jquery-ui-1.7.2.css for my calender.
When i select pickup and return date, both are shown in red color. But, I also want to highlight dates between these two in my calendar with my choice of color.
Please help me out with code.
Working Fiddle
Try this:
$(".datepicker").datepicker({
minDate: 0,
numberOfMonths: [12,1],
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker();
} else {
$("#input2").val(dateText);
$(this).datepicker();
}
}
});

Highlighting dates between two selected dates jQuery UI Datepicker

I have one datepicker with numberOfMonths set to 2.
Arrival Date and Departure Date are determined using this logic (within onSelect):
if ((count % 2)==0) {
depart = $("#datepicker-1").datepicker('getDate');
if (arriv > depart) { temp=arriv; arriv=depart; depart=temp; }
$("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv));
$("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
} else {
arriv = $("#datepicker-1").datepicker('getDate');
depart = null;
if ((arriv > depart)&&(depart!=null)) { temp=arriv; arriv=depart; depart=temp; }
$("#day-count").val('');
$("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv));
$("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
}
if(depart!=null) {
diffDays = Math.abs((arriv.getTime() - depart.getTime())/(oneDay));
if (diffDays == 0) { $("#day-count").val((diffDays+1)+' Night/s'); } else { $("#day-count").val(diffDays+' Night/s'); }
}
Getting the number of days within these 2 dates has no problem
What I want now is highlight those dates starting from the Arrival to Departure
I tried working around the onSelect but had no luck.
I am now using beforeShowDay to highlight these dates but I can't seem to figure it out
Got a sample from here
Basically, it is customized to highlight 11 or 12 days after the selected date (Here's the code from that link).
$('#datePicker').datepicker({beforeShowDay: function(date) {
if (selected != null && date.getTime() > selected.getTime() &&
(date.getTime() - selected.getTime())
Since I am new to using the UI, and the logic is not clear to me yet, I can't seem to figure this out. Any ideas on how I can make this highlight dates between the Arrival and Departure using my aforementioned logic used in determining the two?
Super old question but I came across the answer for anyone that finds this: http://jsfiddle.net/kVsbq/4/
JS
$(".datepicker").datepicker({
minDate: 0,
numberOfMonths: [12, 1],
beforeShowDay: function (date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function (dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker();
} else {
$("#input2").val(dateText);
$(this).datepicker();
}
}
});
IF this helps.. :-)
$(function() {
var togo=['10/25/2013']
var datesArray=['10/27/2013','10/28/2013']
var datesArray1=['10/25/2013','10/26/2013']
var datesArray2=['10/24/2013']
$( "#datepicker" ).datepicker({
numberOfMonths: 2,
selectMultiple:true,
beforeShowDay: function (date) {
var theday = (date.getMonth()+1) +'/'+
date.getDate()+ '/' +
date.getFullYear();
return [true,$.inArray(theday, datesArray2) >=0?"specialDate":($.inArray(theday, datesArray)>=0?"specialDate2":($.inArray(theday, datesArray1)>=0?"specialDate1":''))];
},
onSelect: function(date){
console.log("clicked"+date);
return [true,$.inArray(['10/24/2013'], togo) >=0?"specialDate":($.inArray(date, datesArray1)>=0?"specialDate1":'')] ;
}
});
//$.inArray(theday, datesArray) >=0?"specialDate":'specialDate1'
});
http://jsfiddle.net/pratik24/Kyt2w/3/
Not quite an answer, but this may be useful:
http://www.eyecon.ro/datepicker/
Rather unfortunately named, but it seems like it could be what you need.

Categories

Resources