[英]How to disable past dates in calendar in date-picker in javascript/jquery?
I am working on a website in which I want the disable the past dates in calendar. 我在一个网站上工作,我想在其中禁用日历中的过去日期。
The HTML and JQuery codes which I have used in order to make the calendar are: 我用来制作日历的HTML和JQuery代码是:
$("#startdate_datepicker").datepicker({numberOfMonths:[1, 2]}); $("#enddate_datepicker").datepicker({numberOfMonths:[1, 2]});
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="dates"> <div class="start_date" style="width:50%;margin-right:3%;"> <input readonly="readonly" class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker"> </div> <div class="end_date" style="width:50%;margin-left:3%;"> <input readonly="readonly" class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker"> </div> </div>
Problem Statement: 问题陈述:
I am wondering what changes I should make in the code above so that after selecting the start date, the dates before the start date should get disabled on selecting the end date . 我想知道我应该在上面的代码中进行哪些更改, 以便在选择开始日期之后,在选择结束日期时应该禁用开始日期之前的日期 。
You can use the option=beforeShowDay of JQuery UI , then customize the styles for each day like below demo: 您可以使用JQuery UI的option = beforeShowDay ,然后自定义每天的样式,如下面的演示所示:
As JQuery UI Guide for beforeShowDay : 作为beforeShowDay的 JQuery UI指南:
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
let startDateUI = $("#startdate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { return calDate - new Date() < 0 ? [false, '', ''] : [true, '',''] } }); $("#enddate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" ) return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '',''] } });
.disable-day{ background-color:red; }
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="dates"> <div class="start_date" style="width:50%;margin-right:3%;"> <input readonly="readonly" class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker"> </div> <div class="end_date" style="width:50%;margin-left:3%;"> <input readonly="readonly" class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker"> </div> </div>
Use .datepicker("option", "minDate", <value of start date>)
to set the earliest selectable date. 使用
.datepicker("option", "minDate", <value of start date>)
设置最早的可选日期。 "maxDate" will allow you to set the latest selectable date. “ maxDate”将允许您设置最新的可选日期。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.