限制日期范围选择器中的选择日期并禁用其他日期javascript动态设置最大日期

问题描述

使用不带任何库或插件(Dayjs，Moment.Js或date-fns)的纯JavaScript构建方法.

Using pure JavaScript build methods without any library or plugin (Dayjs, Moment.Js or date-fns).

仅在为最大日期动态设置的日期范围选择器中选择 2个月(60天).

Allow to choose 2 months (60 days) only in date range picker dynamically set for max date.

首先，我选择开始日期作为今天的日期或当天的任何日期.然后，选择的结束日期仅在2个月(60天)之内.其他日期必须处于禁用状态.

First I choose start date as today's date or any date on that day.Then the end date to choose is only within 2 months (60 days).Other dates must be in disabled state.

无法使用HTML的min和max属性.在那必须设置最小和最大日期的硬编码日期.应该在日期选择器中动态设置最大日期，并禁用其他日期.

HTML min and max attributes not possible to use. In that have to set the hardcoded date for min and max date.Should be dynamically set for max date in date picker and disable other days.

<div class="container">
    <form id="form" class="form">
        <div class="form__control">
            <input type="date" id="input__date" />
                <small class="erorr__Msgs">Select date within 60 days only </small>
        </div>
        <button class="get__Date" onclick="rangeDate()">Submit</button>
    </form>
</div>

function rangeDate() {

    let selectedDate = document.querySelector("#input__date").value;
    console.log("selectedDate:" + selectedDate);
    var daystimestamp = new Date().getTime() + (60 * 24 * 60 * 60 * 1000)
                                              // day hour min sec msec
    if(daystimestamp < selectedDate) {

    } else(daystimestamp>= selectedDate){
          }
}

我添加了jquery代码以更好地理解这个问题:

I add the jquery code to the better understand the question:

$("").datepicker({
    dateformat:"dd-m-yyy",
    maxDate:'3M',
    minDate:'-3M'
});

maxDate 设置为3M，即3个月(90天).可以在没有任何库或插件的情况下用纯JavaScript设置这样的日子.

maxDate is set to 3M i.e. 3 months (90 days). It is possible to set days like this in pure javascript without any library or plugin.

最大日期应结转.

示例:

如果在2020年12月1日选择，则最长日期选择不应超过2021年2月1日之后的2个月(60天).

If selected in Dec 1 2020 then max date selection should not exceed more than 2 months (60 days) dates after 1 feb 2021 should be disabled.

推荐答案

这是一个代码示例，我在代码中定义了 min 和 max 日期> input [type = date] .您可以将 minDate 更改为您想要的每一天，并且 maxDate 将相应地定义为 + 60 天.

Here's a code sample where I defined in the code the min and max date of the input[type=date]. You can change minDate to be every day you want, and the maxDate will be defined accordingly with + 60 days.

let dtElem = document.getElementById('datetime');
let minDate = new Date();
let maxDate = new Date();
maxDate.setDate(minDate.getDate() + 60);

dtElem.min = formatDate(minDate);
dtElem.max = formatDate(maxDate);

console.log(formatDate(minDate));
console.log(formatDate(maxDate));


function formatDate(date) {
  let dd = String(date.getDate()).padStart(2, '0');
  let mm = String(date.getMonth() + 1).padStart(2, '0');
  let yyyy = date.getFullYear();
  return `${yyyy}-${mm}-${dd}`;
}

<input type="date" id="datetime">

这篇关于限制日期范围选择器中的选择日期并禁用其他日期javascript动态设置最大日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！