Question

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

仅在为最大日期动态设置的日期范围选择器中选择 2个月（60天）。

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

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

<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代码以更好地理解这个问题：

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

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

最大日期应结转。

示例：

如果在2020年12月1日选择，则最大日期选择不应超过2021年2月1日之后的2个月（60天）。

Answer 1

这是一个代码示例，我在代码中定义了min的{{1}}和max日期。您可以将input[type=date]更改为所需的每一天，并且minDate将以maxDate天相应地定义。

+ 60

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}`;
}

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

1 个答案: