html 无法灰化日历中的过去日期

qzwqbdag  于 2023-08-01  发布在  其他
关注(0)|答案(1)|浏览(128)

我有这个代码,我试图禁用过去的日期,但它不起作用,我找不到什么原因导致的问题,你有任何想法是什么原因导致这个问题这里是我的代码

<div id="book" class="appointment-wrapper">
    <div class="appointment">
      <div class="appointment-form">
        <form action="#">
          <h2 class="heading">Book Appointment</h2>
  
          <div class="app-field">
            <p>Name</p>
            <input type="text" placeholder="Your Name">
          </div>
  
          <div class="app-field">
            <p>Date</p>
            <input type="date" id="calendar" min="2023-07-26">
          </div>
  
          <div class="app-field">
            <p>Time</p>
            <input type="time">
          </div>
  
          <div class="app-field">
            <p>Service</p>
            <select>
              <option value="service1">Service 1</option>
              <option value="service2">Service 2</option>
              <option value="service3">Service 3</option>
              <option value="service4">Service 4</option>
            </select>
          </div>
  
          <button class="btn-appointment">Book now</button>
        </form>
      </div>
    </div>
  </div>

字符串

dm7nw8vv

dm7nw8vv1#

首先,您需要使用new Date()获取今天的日期。
然后把它传入你的 min input。
但是你不能仅仅通过声明你的输入来得到今天的日期,不是吗?
如果是这样,你需要用 JavaScript 来做,并将值绑定到你的输入上。

document.getElementById("calendar").min = new Date().toLocaleString('en-ZA',{year:'numeric',month:'2-digit',day:'2-digit'}).replaceAll('/','-');

个字符

相关问题