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">
I am working on bootstrap datepicker.
function initializeDatePicker() {
$('#milestone_start_date').datepicker({
weekStart: 1,
startDate: '-1m',
endDate: '+13m',
autoclose: true,
format: 'yyyy-mm-dd'
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#milestone_end_date').datepicker('setStartDate', minDate);
});
$('#milestone_end_date').datepicker({
weekStart: 1,
format: 'yyyy-mm-dd',
autoclose: true
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#milestone_start_date').datepicker('setEndDate', maxDate);
});
}
I called this function for multiple times to update input startDate, EndDate fields.
$('#milestone_end_date').datepicker('destroy');
$('#milestone_start_date').datepicker('destroy');
$('#milestone_start_date').val(data.start_date);
$('#milestone_end_date').val(data.end_date);
initializeDatePicker();
After AJAX call, correct values are displayed in start, EndDate popups. But if I clicked startDate field. And focusOut from the field. Value in startDate changes to today.
I am not sure what is wrong here.
Please help me. Thanks in advance.
I have two text boxes with a datepicker hooked up to them. The text boxes are for start date and end date. The first datepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datepicker so that it cannot choose a date before the date chosen in the first date picker? For example: If today is 12/11/10 and I choose 12/15/10 in the first datepicker, then the second date picker shouldn't be able to choose anything before 12/15/10.
Heres what I have so far:
$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what #Victor mentioned..I hope it helps...Regards...Ozlem.
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
//Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
$("#endDatePicker").datepicker( "option", "minDate", endDate );
$("#endDatePicker").datepicker( "option", "maxDate", '+2y' );
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true
});
Update:
The approach above set the minDate only on creation time.
I used the onSelect event to change the minDate option of the second datepicker like this:
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
the Tin Man's solution worked for me after adding $("#txtEndDate").datepicker() at the bottom
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
$("#txtEndDate").datepicker(); //it is not working with out this line
try this man:
$("#dateTo").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: new Date()
}).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(){
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
}
}).datepicker("setDate", new Date());
$('#start_date').datepicker({
endDate: new Date(),
autoclose: true,
}).on("changeDate", function (e) {
$('#end_date').datepicker('setStartDate', e.date);
});
$('#end_date').datepicker({
autoclose: true,
});
From a pure UI standpoint, you shouldn't. If the user picks the wrong month on both datepickers, and tries to select the correct month, he has a 50% change of being hindered by the UI. Ideally, you would allow the incorrect selection and display a helpful error message saying the end date should be after the end date.
If you wish to implement your idea : give each datepicker a "change" event that changes the options on the other datepicker appropriately.
Use the "getDate" method of the first datepicker UI and pass it into minDate option of the second datepicker:
$("#txtEndDate").datepicker({
showOn: "both",
minDate: $("#txtStartDate").datepicker("getDate")
});
Use This Code:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday'
});
$("#txtEndDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: $("#txtStartDate").datepicker("getDate") });
});
</script>
Hi everyone going to show what works with me in this case:
2 Datepickers ( DateFrom and DateTo)
HTML:
<!-- Datapicker dateFrom -->
<label for="dateFrom"> Date from: </label>
<div>
<input type="text" id="dateFrom" class="form-control" autocomplete="off"
th:placeholder="Enter a date From.."/>
</div>
<!-- Datapicker dateTo-->
<label for="dateTo"> Date to: </label>
<div>
<input type="text" id="dateTo" class="form-control" autocomplete="off"
th:placeholder="Enter a date to..."/>
</div>
Next you build your datapickers in JavaScript:
Datapicker activation (With YOUR datapicker build requirements)
$("#dateFrom").datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
$('#dateTo').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
-And finally on the OnChange Event, for every time a Date is picked in any of the datepickers the selectable range avaliable in the other Datapicker changes.
$("body").on("change", "#dateFrom", function() {
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});
$("body").on("change", "#dateTo", function() {
$('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});
This make the DateTo DataPicker limit on change the date of the DateFrom Datapicker and viceversa.
$startDateCtrl.change(function () {
setMinEndDateValue($startDateCtrl, $endDateCtrl);
});
$endDateCtrl.datepicker();
I have two Date picker start and end.
End Date min and max date we are setting based on the selection from start.
Min start date for End date picker is start date from start picker selection.
Max end date for end date picker is selected start date from start date picker + 7 days.
function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
var $maxSchedulingDate = new Date(#MaxDate.Year, #MaxDate.Month -1, #MaxDate.Day );
var $startDate = $startDateCtrl.val();
var $selectedStartDate = new Date($startDate);
$selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
var $maxEndDate = new Date();
if ($selectedStartDate > $maxSchedulingDate) {
$maxEndDate = $maxSchedulingDate;
}
else {
$maxEndDate = $selectedStartDate;
}
$endDateCtrl.datepicker("option", "minDate", $startDate);
$endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
}
Building on the previous answers in this thread, I felt a solution that worked with defaults and reapplied both min and max dates would be useful:
// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);
// To
$("#datepickerTo").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);
function limitToDateSpan(currentFromDate) {
$("#datepickerTo").datepicker("option", "minDate", currentFromDate);
var maxDate = new Date(currentFromDate.getTime());
maxDate.setFullYear(maxDate.getFullYear() + 1);
$("#datepickerTo").datepicker("option", "maxDate", maxDate);
}
limitToDateSpan(defaultFromDate);
// From
$("#datepickerFrom").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: "2013-01-01",
maxDate: "+1Y",
onSelect: function (dateText) {
limitToDateSpan(new Date(dateText));
}
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
$("#<%=txtFromDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#<%=txtToDate.ClientID%>").datepicker("option", "minDate", dt);
}
});
$("#<%=txtToDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#<%=txtFromDate.ClientID%>").datepicker("option", "maxDate", dt);
}
});
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>
$('#date_of_birth').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange:"-60:+0",
onSelect: function (date) {
alert("dateofbirth");
var dob = new Date(date);
var today = new Date();
var age = today.getFullYear() - dob.getFullYear();
$('.getage').val(age);
}
});
onSelect function is not working.I cant get the value of the date selected from the datepicker in AdminLTE-master template only.I can get the answer in some other template.
AdminLTE template doesn't use jQuery Datepicker. It uses bootstrap datepicker.
Please have a look at bootstrap datepicker documentation: https://bootstrap-datepicker.readthedocs.org/en/release/