I wanted to have a datepicker that would disable not only past dates, but also future dates. All of the answers on Stack Overflow regarding similar questions all point towards using startDate and endDate. But what if you're using a version of datepicker that doesn't have those options? For example, bootstrap-datepicker.js.
The main obstacle was correctly setting the ending cut-off date (at least for me). I found that the method that should work for all datepickers is to directly add or subtract the date in the date declaration when initializing it, because this is a JS operation and bootstrap datepickers are based on JS:
new Date(checkin.date.getFullYear(), checkin.date.getMonth(), checkin.date.getDate() + 6, 0, 0, 0, 0);
Note how I have the + 6 next to the date as I want the end date to be one week after the chosen start date, and to disable everything after that.
Thus, the full code for disabling everything before and everything one week after the chosen start date is:
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('.date-group').datepicker({
onRender: function (date) {
}
}).on('changeDate', function (ev) {
//if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 0); // automatic date offset for end date (currently 0)
checkout.setValue(newDate);
//}
checkin.hide();
checkout.show();
$('.end-date-group')[0].focus();
}).data('datepicker');
var checkout = $('.end-date-group').datepicker({
onRender: function (date) {
var cap = new Date(checkin.date.getFullYear(), checkin.date.getMonth(), checkin.date.getDate() + 6, 0, 0, 0, 0);
if (date.valueOf() < checkin.date.valueOf()) {
return 'disabled';
}
else if (date.valueOf() > cap.valueOf()) {
return 'disabled';
}
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
The resulting datepicker:
You can also do the same for month and year should the need arise.
For reference, the specific datepicker that I used is bootstrap-datepicker.js.
Hopefully this helped. Cheers!
Related
I wanted to ask, if is possible to add one day to second datepicker, while selecting date in first datepicker.
Below some piece of code, part with comment, shows when this event is.
This code works fine, but i want to add one day, on first datepicker update.
Now this code update second datepicker with exact value of first one.
Is this possible without moment.js ?
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('.date-1').datepicker({
startDate: now,
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
// This code updates second datepicker, but should add + 1 day to this date.
$('.date-2').datepicker('setStartDate', startDate);
$('.date-2').datepicker('setDate', startDate);
}).data('datepicker');
I am doing displaying dates in a column, if it is today`s date, there should be css class applied, if not, just date should be displayed. I tried to solve it this way:
template: "#if(Date == new Date()) {#<div class='todayClass'>#= kendo.toString(kendo.parseDate(Date, 'yyyy-MM-dd'), 'dd-MM-yyyy') #</div>#} else{#= kendo.toString(kendo.parseDate(Date, 'yyyy-MM-dd'), 'dd-MM-yyyy') #}#",
but I get an error: "Date is not a constructor", does anyone know how to solve it? Thanks
You can create a function for the dataBound event that iterates through the grid's rows and check for that specific field.
function checkDates() {
var currentDate = new Date();
currentDate = currentDate.setHours(0, 0, 0, 0); // eliminate the time from the date
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
// check if the fields match and apply a class to the row if so
var mydate = dataView[i].Date.setHours(0, 0, 0, 0); // eliminate the time from the date
if (mydate == currentDate) { // compare dates
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("yourClass");
}
}
}
You may need to make the date formats match, but that another issue (not hard to solve)
EDIT
I have addressed the date formatting for you, this way it certainly works, as you can confirm in this fiddle
I have implemented full calendar with default view as agendaWeek. My motive here is to get date and time of clicked slot in calendar. So as an implementation I have done below code in calendar.js file:
dayClick: function (date, allDay, jsEvent, view) {
var now = new Date();
var targetDate = new Date();
targetDate.setDate(targetDate.getDate() + 10);
if ((date.setHours(0, 0, 0, 0) < now.setHours(0, 0, 0, 0)) || (date.setHours(0, 0, 0, 0) > targetDate.setHours(0, 0, 0, 0))) {
alert("Wrong slot of booking!!!");
}
else {
console.log(date);
alert(date.getDate()+','+ (date.getMonth()+1) +',' + date.getYear());
}
},
So in console it shows me date correct but time is 00:00:00.
So it would be great if anyone help me in this issue.
You're getting clicked date and time from "date" parameter and you are setting is to (0,0,0,0) through following function.
date.setHours(0, 0, 0, 0)
Get a clone of that variable and use it to check for your conditions.
Make sure you clone that variable not just passing the reference. I hope that will solve your issue.
i need a java script to validate the text box which needs to allow only current and future dates.This is a text box and i am validating it on blur.
text box property :statingOn
written java script like below
function pastDateValidation()
{
var d=document.getElementById("startingOn").value;
if(new Date(d) < new Date())
{
alert(d);
document.getElementById("startingOn").value="";
}
}
it is validating the past dates but not the current date.I require the date from current to future.
if any one have th idea please share ur inputs.Thanks in advance.
You will need to discard the time portion of the current date. new Date() is the current date and time. Since your entered date has no time portion it is defaulting to midnight, which is before the current time, even though the dates are the same. instead, clear the time portion from the current date:
var today = new Date();
today.setHours(0, 0, 0, 0);
Check whether the date object is past date.
The date.js library is quite handy for such things. It comes with bunch of functions which you can use.
function isPastDate(value) {
var now = new Date;
var target = new Date(value);
if (target.getFullYear() < now.getFullYear()) {
return true;
} else if (target.getMonth() < now.getMonth()) {
return true;
} else if (target.getDate() <= now.getDate()) {
return true;
}
return false;
}
I'm usung the jQuery datepicker. In my "EndDate" textbox I'd like to use the date selected from the the "StartDate" textbox + 1. How do I do this?
I tried this but didn't work. In my start date code I had...
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
Then in my end date code I had...
minDate: testm,
but the end date still made all the days for the month available.
Edit. I'm curious as to why this doesn't work. In my start date datepicker I have this..
onSelect: function (dateText, inst) {
test = dateText
}
Why can't I come down into my end date datepicker and say, minDate: test?
Edit. Still not working
$(".dateStartDatePickerBox").datepicker({
minDate:'-0d',
onSelect: function(dateText, inst)
{
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
$("#dateEndDatePickerBox").datepicker("option", "minDate", testm);
}
});
$(".dateEndDatePickerBox").datepicker({
onSelect: function()
{
}
});
You'll need to set the min date dynamically on the change event of the start date.
Something like:
$("#startDate").change(function() {
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
$("#endDate").datepicker("option", "minDate", testm);
});
Answer to the edit:
You cannot do the following:
var test;
$("#myinput").datepicker({
onSelect: function() { test = $(this).datepicker("getdate"); }
});
$("#myotherinput").datepicker({
minDate: test
});
Test is uninitialized at the time that minDate is being set on myotherinput. The process of setting the minDate doubtless requires DOM manipulation which datepicker manages on initialization or when "option" is called. Simply changing the variable that was used for initialization does not effect the already initialized datepicker.
Are you talking setting a max selection date?
StartDate = new Date("March 20, 2010");
EndDate = new Date("March 21, 2010");
$("#datepicker").datepicker({ minDate: StartDate, maxDate: EndDate, defaultDate: StartDate });
Note the maxDate? That won't let you select any days past it ...
The API documentation for the date picker does seem to say it should take a Date object, but I've had this exact problem in the past and this is how I solved it.
Pass minDate an offset, instead of a date. You'll need a function to take your start date, add one to it and then get the offset from today. So you could have a function like:
function offsetFromToday( someDate ) {
// clear time offset because we only want to take date into account
someDate.setHours( 0 );
someDate.setMinutes( 0 );
// The number of milliseconds in one day
var ONE_DAY = 1000 * 60 * 60 * 24;
// Convert both dates to milliseconds
someDate = someDate.getTime();
var today = new Date().getTime();
// Calculate the difference in milliseconds
var difference = Math.abs( someDate - today );
// Convert back to days and return
return Math.floor( (difference / ONE_DAY) + 1 );
}
So you just need to get your start date a day ahead: StartDate.setDate( StartDate.getDate() + 1 ) or similar, and then pass it to this function to get an offset, then give that to minDate.