Question

是否可以禁用HTML 5输入类型日期的所有周末？

pixels.latlon=cbind(runif(200000,min=-180, max=-120), runif(200000, min=50, max=85))
grwl.tibble = tibble(long=runif(20000,min=-180, max=-120), lat=runif(20000, min=50, max=85), id=runif(20000, min=0, max=20000))
rnum <- apply(pixels.latlon, 1, function(x) {
    xlon=x[1]
    xlat=x[2]
    grwl.filt = grwl.tibble %>% 
      filter(long < (xlon+0.3) & long >(xlon-0.3) & lat < (xlat+0.3)&lat >(xlat-.3))
    grwl.latlon.filt = cbind(grwl.filt$long, grwl.filt$lat)
    dm <- distm(x, grwl.latlon.filt, fun=distHaversine)
    rnum=apply(dm, 1, which.min)
    id = grwl.filt$id[rnum]
    return(id)
                     })

Answer 1

这对于HTML 5输入类型日期是不可能的。
您可以使用flatpickr作为替代：（https://chmln.github.io/flatpickr/examples/#disabling-specific-dates）
它看起来更好，也可以满足您的要求！
在文档中提到了一个名为disable的属性，可用于删除周末。

{
"disable": [
    function(date) {
        return (date.getDay() === 0 || date.getDay() === 6);
    }
],
"locale": {
    "firstDayOfWeek": 1 // start week on Monday
}

}

完整的示例：

$("#date1").flatpickr({
    enableTime: true,
    dateFormat: "m-d-Y",
    "disable": [
        function(date) {
           return (date.getDay() === 0 || date.getDay() === 6);  // disable weekends
        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // set start day of week to Monday
    }
});

<html>
  <head>
    <title>Using Flatpickr</title>
  <!--  Flatpicker Styles  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
  </head>
  <body>
      <input id="date1"  placeholder="MM/DD/YYYY" data-input />
        <!-- jQuery -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <!--  Flatpickr  -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
  </body>
</html>

Answer 2

只检查一天。如果是周末，则可以重置该值并告诉用户选择其他内容。

const picker = document.getElementById('date1');
picker.addEventListener('input', function(e){
  var day = new Date(this.value).getUTCDay();
  if([6,0].includes(day)){
    e.preventDefault();
    this.value = '';
    alert('Weekends not allowed');
  }
});

<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />

在HTML 5输入类型日期禁用周末

2 个答案: