We Keep Coding

Using datepicker in jquery to keep start date less than end date and allowing no weekends selection

I am new to jQuery and JSP. I am trying to make a booking system which has two dates - start date and end date. I require the following functionalities to be included in the system.
Start date should be less than end date and end date should be more than start date.
Booking should be allowed only on weekdays.
Format of date should be dd-mm-yy.
I was able to achieve all these functionalities individually but when I merge them either of them does not work.
Here is the jQuery code for start date should be less than end date and end date should be more than start date.
<script>
$(document).ready(function () {
$("#datepick").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#datepick1").datepicker("option", "minDate", dt);
}
});
$("#datepick1").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#datepick").datepicker("option", "maxDate", dt);
}
});
});
</script>
And this is the jQuery code for disabling weekends and changing the date format.
<script>
$(document).ready(function () {
$("#datepick").datepicker({
dateFormat: "dd-mm-yy",
beforeShowDay: $.datepicker.noWeekends
});
$("#datepick1").datepicker({
dateFormat: "dd-mm-yy",
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
I tried combining these two but either one of the functionality does not work.
Thank you in advance!!!

You can easily achieve that with just a bit of CSS:
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
pointer-events: none;
opacity: 0.5;
}
This will target datepicker CSS class weekends and set it to not clickable and opacity same as you would using datepicker JS.
And to get around date format not working use this:
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
datepicker excepts 2015-03-25 and outputs this kind of format in selected:
2015-03-25T12:00:00-06:30
so when you set your date format it does not produce it right in . So you split your format, and rearrange it in your case from: 22-07-2020 to 2020-07-22 then datepicker new date function starts working again.
So now you can use your date range function as before just with added dateFormat: "dd-mm-yy", and code above. Example:
$(document).ready(function() {
$("#datepick").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(selected) {
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
var dt = new Date(newdate);
dt.setDate(dt.getDate());
$("#datepick1").datepicker("option", "minDate", dt);
}
});
$("#datepick1").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(selected) {
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
var dt = new Date(newdate);
dt.setDate(dt.getDate());
$("#datepick").datepicker("option", "maxDate", dt);
}
});
});
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
pointer-events: none;
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="datepick" name="date"><input type="text" id="datepick1" name="date">

After selecting future date it should automatically select todays date in bootstrap-datepicker

I dont understand how it will work so the below code is there please help me.
$(document).ready(function () {
var todayDate = new Date();
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
autoclose:true,
endDate: '-1d'
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
$('.datepicker').keyup(function () {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9^-]/g, '');
}
});
});

Try this - https://jsfiddle.net/ud98ho7q/
I tried by enabling all the dates and attached change event to identify if date selected is in future then reset it to today.
$(document).ready(function () {
var todayDate = new Date();
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
autoclose:true,
}).on('changeDate', function (ev) {
if(ev.date.getTime() > todayDate.getTime() ){
$('.datepicker').datepicker("setDate", todayDate );
}
});
});

DatePicker Start Date and Finish Date Validation without plugin

Using Asp.Net MVC 4 with JqueryUI.
I have 2 textboxes which provide me datepickers. I need validation for; start date can be equal to finish date and finish date can not be less from start date.
Datepicker script code;
<script>
$(function () {
$(".date").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
My textboxes:
<td>#Html.TextBoxFor(model => model.StartDate, "{0:dd.MM.yyyy}", new { #class = "date", #id="dt1" }) </td>
<td>#Html.TextBoxFor(model => model.FinishDate, "{0:dd.MM.yyyy}", new { #class = "date", #id="dt2" }) </td>
I found this code from this subject. But i can't get validation. I cant figure out what's the problem. All helps will be appreciated.
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
var minDate = $(this).datepicker('getDate');
dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
});
JQuery - end date less than start date

I think this may helps you, when you changes one of the datepickers will show an error if both are different. and also se the isValid variable to false too stop it from being able to submit
<script>
var isValid=true;
$(function () {
$(".date").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function() {
var date1 = $("#dt1").datepicker('getDate');
var date2 = $("#dt2").datepicker('getDate');
if (date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear())
{
isValid=false;
//ALERT error
}
}
});
});
</script>

JQuery datepicker, months year only on input

I have a question, quite similar to the one at: year/month only datepicker inline
The difference is that I am using the input version, rather than the div.
In the div case, the ui-datepicker-calendar is inside the outer div, and so can be accessed uniquely.
But with the input, there is no relation between the input and the ui-datepicker-calendar (or, not that I've found...)
Just to be clear, I cannot use the "global" .ui-datepicker-calendar { display: none;}, as I have other datepicker that is a full one (i.e., uses the days as well).
My code looks as follows:
$("#monthsYearInput").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "mm/yy",
onClose: function(dateText) {
if (dateText != "") {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
beforeShow: function() {
var dateText = $(this).val();
var isPopulated = dateText.length > 0;
if (isPopulated) {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("option", "defaultDate", selectedDate);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
onChangeMonthYear: function(year, month) {
if (changingDate) {
return;
}
changingDate = true;
$(this).datepicker("setDate", new Date(year, month - 1, 1));
$(this).datepicker("refresh");
changingDate = false;
}
});
$("#monthsYearInput").focus(function () {
$(".ui-datepicker-calendar").hide();
};
$("#monthsYearInput").blur(function () {
$(".ui-datepicker-calendar").hide();
};
It all looks OK as start, but then when the year/month has changed, the new date is populated in the input (desired), but now the calendar displays (not desired).
Any ideas on how to solve this issue?...
Thanks in advance.
JSfiddle: http://jsfiddle.net/OhadRaz/8z9M2/

I think that you could still do it with a css like in the solution that you've linked but targeting only that one datepicker
#monthsYearInput .ui-datepicker-calendar { display: none;}

Can you put your code on JSFiddle so we can see what it is doing? I may have done something familiar at Jquery Datepicket Supress Year, but can't tell without a JSFiddle demo...

OK,
I came up with some sort of a solution:
var superUpdateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
var ret = superUpdateDatepicker.apply(this, arguments);
if (inst.id == "monthsYearInput") {
$(".ui-datepicker-calendar").hide();
}
return ret;
}
While working, I am not happy with it.
It is too hacky, it is not clean, and I just don't like it.
Any better ideas?...

How to set the datepicker maxDate based on another datepicker?

I have declared a date picker:
define(["ui/nal.ui.core"], function () {
$.widget("nal.datePi", {
options: {
numberOfMonths: 2
},
_create: function () {
var $el = this.element;
$el.datepicker(this.options);
}
});
});
Which has 2 sons:
define(["ui/nal.ui.datePi","ui/nal.ui.textFieldDateDeparture"], function() {
$.widget( "lan.datePiDeparture", $.lan.datePi, {
});
});
define(["ui/nal.ui.datePi","ui/nal.ui.textFieldDateArrival"], function() {
$.widget( "lan.datePiArrival", $.lan.datePI, {
});
});
How can I set maxDate on Arrival to 1 year depending on Departure.

Would something simpler like this work: (just pseudocode)
var depDate = $(".divToDate").datepicker('getDate');
depDate.setDate(depDate.getYear() + 1);
(".arrivalDiv").datepicker({
maxdate: depDate;
basically you grab the date that is associated with your arrival date datepicker and add a year and set maxDate to that new value. You might have to getDate and then use the .addYear()