Allow 1 day booking with bootstrap-datepicker - javascript

I have been working with bootstrap-datepicker with little luck. I have the following code but wish to allow a 1 day booking (i.e. picker1 - From date 01/01/15 and picker 2 - To date 01/01/15. At the moment it only allows me to pick the next day for the To date after selecting the initial From date.
At the moment a 1 day booking is classed as 24 hours, over 2 dates (i.e. From 01/01/15 - 02/01/15) would be classed as a 1 day booking and charged at the 1 day rate.
How do I edit the code below or the Javascripts for Bootstrap-Datepicker to allow 1 day bookings to have the same to and from dates? and if the from date is the next day (i.e. 01/01/15 - 02/01/15) charge at a 2 day rate?
var hire_from = null;
var hire_to = null;
var setPrice = function () {
var oneDay = 24*60*60*1000;
if (hire_from && hire_to) {
var diffDays = Math.round(Math.abs((hire_from - hire_to)/(oneDay)));
var price = diffDays*$("#enquiry_price").val();
$("span#weekly_price").html("£ "+price.toFixed(0))
var fee = price*$("#enquiry_discount").val()
$("span#commission").html(fee.toFixed(0));
}
}
var initDatepickers = function(picker1, picker2){
if($(picker1)[0] && $(picker2)[0]){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $(picker1).datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
},
format: 'dd/mm/yyyy'
}).on('changeDate', function(ev) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate());
checkout.setValue(newDate);
hire_from = newDate;
setPrice();
$.post('/enquiries/presave', {'hire_from': $.datepicker.formatDate('dd/mm/yy', hire_from), authenticity_token: window._token}, function(data){}, 'json');
checkin.hide();
$(picker2)[0].focus();
}).data('datepicker');
var checkout = $(picker2).datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}, format: 'dd/mm/yyyy'
}).on('changeDate', function(ev) {
checkout.hide();
var newDate = new Date(ev.date)
hire_to = newDate;
$.post('/enquiries/presave', {'hire_to': $.datepicker.formatDate('dd/mm/yy', hire_to), authenticity_token: window._token}, function(data){}, 'json');
setPrice();
}).data('datepicker');
}
};
Thank you for your input and help.

Try setting the picker2 onRender() to:
return date.valueOf() < checkin.date.valueOf() ? 'disabled' : '';
to enable the second datepicker to accept the same day.
Then use:
var diffDays = Math.ceil(Math.abs((hire_to - hire_from + 1) /(oneDay)));
to make the same day checkout be counted as a day's charge, and the next day checkout as 2 days

Related

How to set Min and Max Date in Jquery Date Selection depending on current date

The JSFiddle Can be Found Here: http://jsfiddle.net/PQfDc/682/
I need it to:
Pick a date in a 365 day period based on user selection input. For example is a user inputs 01/01/2016, they can only select a date between 01/01/2016 and 01/01/2017 and nothing after that.
I have also set a method where if the date is before 31st Jan the minimum the start and end date can vary. For example the only dates a user can choose from are 31/01/2015 - 31/12/2016
var d = new Date(); var Month = d.getMonth();var Month = Month + 1;
var Year = d.getFullYear(); var Day = d.getDate();
if(Day <= 9){ var Day = "0".concat(Day);}
if(Month <= 9){ var Month = "0".concat(Month);}
if(Month == 01 && Day <= 31){
var Year = Year - 1;
var MinYear = "31-01-"+Year;
var Year = Year + 1;
var MaxYear = "31-12-"+Year;
} else {
var MinYear = "31-01-"+Year;
var Year = Year + 1;
var MaxYear = "31-12-"+Year;
}
$(function() {
/* global setting */
var datepickersOpt = {
dateFormat: 'dd-mm-yy',
minDate : 0
}
$("#TxtStrtDate").datepicker($.extend({
onSelect: function() {
var minDate = $(this).datepicker('getDate');
minDate.setDate(minDate.getDate()-365); //add two days
$("#TxtExpDte").datepicker( "option", "minDate", minDate);
}
},datepickersOpt));
$("#TxtExpDte").datepicker($.extend({
onSelect: function() {
var maxDate = $(this).datepicker('getDate');
maxDate.setDate(maxDate.getDate()+365);
$("#TxtStrtDate").datepicker( "option", "maxDate", maxDate);
}
},datepickersOpt));
});
Based on your JSFiddle example:
var datepickersOpt = {
dateFormat: 'dd-mm-yy',
minDate : 0
}
$("#TxtStrtDate").datepicker($.extend({
onSelect: function() {
var minDate = $(this).datepicker('getDate');
var maxDate = new Date();
$('#TxtExpDte').datepicker('option', 'minDate', minDate);
// add 365 days to the selected date
maxDate.setDate(minDate.getDate() + 365);
$("#TxtExpDte").datepicker( "option", "maxDate", maxDate);
}
},datepickersOpt));
$("#TxtExpDte").datepicker($.extend({},datepickersOpt));
Link to JSFiddle: http://jsfiddle.net/2op64ytL/1/
Result:

JavaScript code returning NaN instead of numeric value

When I inputted the code below into jsfiddle it worked exactly as I wanted. However when I implemented it into my project the value returns as NaN.
<script type="text/javascript">
$(function () {
$('#datepicker8').datepicker({
showOnFocus: false,
showTrigger: '#calImg',
beforeShowDay: $.datepicker.noWeekends,
pickerClass: 'noPrevNext',
dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate');
$('#datepicker9').datepicker('option', 'minDate', min || '0');
datepicked();
}
});
$('#datepicker9').datepicker({
showOnFocus: false,
showTrigger: '#calImg',
beforeShowDay: $.datepicker.noWeekends,
pickerClass: 'noPrevNext',
dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true,
onSelect: function (dateStr) {
var max = $(this).datepicker('getDate');
$('#datepicker8').datepicker('option', 'maxDate', max || '+1Y');
datepicked();
}
});
});
var datepicked = function () {
var from = $('#datepicker8');
var to = $('#datepicker9');
var nights = $('#CalcDate1');
var startDate = from.datepicker('getDate');
startDate.setDate(startDate.getDate() + 1);
var endDate = to.datepicker('getDate')
// Validate input
if (endDate && startDate) {
// Calculate days between dates
var millisecondsPerDay = 86400 * 1000; // Day in milliseconds
startDate.setHours(0, 0, 0, 1); // Start just after midnight
endDate.setHours(23, 59, 59, 999); // End just before midnight
var diff = endDate - (startDate + 1); // Milliseconds between datetime objects
var days = Math.ceil(diff / millisecondsPerDay);
// Subtract two weekend days for every week in between
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 (startDay - endDay > 1)
var days = days - 2;
// Remove start day if span starts on Sunday but ends before Saturday
if (startDay == 0 && endDay != 6)
var days = days - 1
// Remove end day if span ends on Saturday but starts after Sunday
if (endDay == 6 && startDay != 0)
var days = days - 1
nights.val(days);
}
}
</script>
I added the code below thinking that it would deal with NaN but it hasn't worked.
if (!isNaN(days)) {
document.getElementById('CalcDate1').value = days;
}
else {
document.getElementById('CalcDate1').value = "";
}
The jsfiddle link is JsFiddle
Its this line here:
var diff = endDate - (startDate + 1);
that is causing the issue. On your fiddle where its working
var diff = endDate - startDate;
This is causing the issue because endDate and startDate are objects and you are trying to concatenate an object with a number

How to Disable the very next weekends in jQuery UI Datepicker?

In an order page I want to implement a calendar, in which, if the user is ordering on friday after 10am, then block the following saturday and sunday in delivery date calendar. Here is a sample code I am trying, but not working as intended.
beforeShowDay: function(date) {
var day = dt.getDay();
var hour = dt.getHours();
if (day == 4) {
// i think, here i want to put the code to disable days
}
}
If I use something like this
beforeShowDay: function(date) {
var day = date.getDay();
var dt = new Date();
var hour = dt.getHours();
return [(day != 5 && day != 6)];
}
I am able to disable Sat and Sun days, but this will disable all the Sat and Sun days. I wnat to disable only the very next Sat n Sun days to be disabled. Also I can get current Hour in var hour, So where should I use the condition to check if the hour is greater than 10am, I am using something like this but not working
beforeShowDay: function(date) {
var dt = new Date();
var hour = dt.getHours();
var day = date.getDay();
if (day == 4 && hour >= 10) {
return [(day != 5 && day != 6)];
}
}
Inside the beforeShowDay function, check the current date to see if it is a Friday and after 10am. If this is true then you also need to check if the date passed as argument is the next Saturday or Sunday:
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
// date (Friday March 13 2015 10:00 AM) is hardcoded for testing
var now = new Date(2015, 3 - 1, 13, 10, 0, 0, 0);
if (now.getDay() === 5 && now.getHours() >= 10) {
var now_plus_1 = new Date(now.getTime()); now_plus_1.setHours(0, 0, 0, 0); now_plus_1.setDate(now_plus_1.getDate() + 1);
var now_plus_2 = new Date(now.getTime()); now_plus_2.setHours(0, 0, 0, 0); now_plus_2.setDate(now_plus_2.getDate() + 2);
return [date.getTime() !== now_plus_1.getTime() && date.getTime() !== now_plus_2.getTime(), ""];
}
return [true, ""];
}
});
});
#import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-darkness/jquery-ui.min.css");
body { font-size: smaller; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input id="datepicker">
$('#datepicker').datepicker({
beforeShowDay: function(date){
var dt = new Date(),
day = dt.getDay(),
hour = dt.getHours(),
twoDaysFrmNow = new Date().setDate(dt.getDate() + 2);
return [!(day == 5 && hour >= 10 && date <= twoDaysFrmNow && date > dt)];
}
});
beforeShowDayType: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array
with:
[0]: true/false indicating whether or not this date is selectable [1]:
a CSS class name to add to the date's cell or "" for the default
presentation [2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is
displayed.
beforeShowDay: function(date) {
var day = dt.getDay();
var hour = dt.getHours();
if( day == 4) {
// this is an example of how to use
//first parameter is disable or not this date
//second parameter is the class you want to add ( jquery will remove the click listener, but you probebly want to style it like this date is not available
//third optional tootltip like 'closed on weekends'
return [false,'disabled','weekend']
}
}

Javascript set date for next 2 days

I am using bootstrap datepicker and my code is:
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#start_date').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkin.hide();
}).data('datepicker');
var checkin1 = $('#end_date').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkin1.hide();
}).data('datepicker');
Its start from today date.
Now I want to start from tomorrow after day or set next 5 days. How to solve this?
var addDays = new Date();
addDays.setDate(addDays.getDate() + 6); //add six days
Then set this date to your datepicker
$("#start_date").datepicker("setDate", addDays);
It is not enough to set only the date, inorder to update the UI add the below code
$("#start_date").datepicker('update');
Do all these after initialising the bootstrap datepicker.
try this:
var date = new Date(); // now
date.setDate( date.getDate() + 6); //Add six days
And then use it on your date picker.

Change the start week on Jquery datepicker ShowWeek

I'm working on a project utilizing the jQuery datepicker, and am trying to use the showWeek attribute to display the week number next to the calender.
My problem is that I don't want 'week 1' to start on the first of January, but instead on the first of August.
Is there any way I can Implement this?
Thanks
working with the next month not working for prev month so i have disabled prev month.
calender always open with August month if current month less than August than calender start from previous year August.
Working Demo http://jsfiddle.net/cse_tushar/dR429/4
$(document).ready(function () {
i = 0;
month_set = 8;
var d = new Date();
week = (Math.ceil(Math.round(((new Date(d.getFullYear() + 1, 1)) - (new Date(d.getFullYear(), 1))) / 86400000) / 7));
current_year = ((d.getMonth() + 1) >= month_set) ? d.getFullYear() : d.getFullYear() - 1;
function myWeekCalc() {
i++;
return i = (i > week) ? 0 : i;
}
$("#d1").datepicker({
showWeek: true,
defaultDate: new Date(current_year, month_set-1, 1),
calculateWeek: myWeekCalc,
onClose: function () {
i = 0;
},
onChangeMonthYear: function (year, month) {
var diff = month - month_set;
var d = new Date(month + ' 1' + ',' + year);
if (d.getDay() != '0') {
i--;
}
if (month == month_set) {
i = 0;
}
if (current_year != year && month == month_set) {
week = (Math.ceil(Math.round(((new Date(year + 1, 1)) - (new Date(year, 1))) / 86400000) / 7));
}
}
}).focus(function () {
$(".ui-datepicker-prev").remove();
});
});
Using jQuery Date Picker custom Week of Year calculation and Moment library to calculate the week of year based on your locale.
Please refer to this working example:
https://jsfiddle.net/amansour/sez8fLgt/
function myWeekCalc(dt) {
var dat = moment(dt).locale("en-US");
return dat.week();
// return dat.isoweek(); // you will have to use firstDay : 1
}
$(function(){
$("[type='date']").datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 0, // 1 being Monday, 0 being Sunday, 6 being Friday
calculateWeek: myWeekCalc,
dateFormat: "yy-mm-dd",
yearRange: "-12:+12"
});
});

Categories