簡體   English   中英

如何在選擇將來的日期時禁用HTML日期輸入類型?

[英]How to disable html date input type in choosing future dates?

我有一個代碼,就在去年,它還在工作。 它的作用是使用戶無法選擇將來的日期。 現在是一月,它似乎不起作用。 我不理解為什么。 請幫我解決這個問題。 您的幫助將不勝感激。

這是輸入:

<input id="reqDate" class="form-control col-md-7 col-xs-12" name="reqDate" required="required" type="date">

使用Javascript:

<script type="text/javascript">
          var input = document.getElementById("reqDate");
          var today = new Date();
          var day = today.getDate();

          // Set month to string to add leading 0
          var mon = new String(today.getMonth()+1); //January is 0!
          var yr = today.getFullYear();

            if(mon.length < 2) { mon = "0" + mon; }

            var date = new String( yr + '-' + mon + '-' + day );

          input.disabled = false; 
          input.setAttribute('max', date);
</script>

順便說一句,我在.php文件中使用此代碼。

就像您使用過的一樣,本機input[type="date"]元素支持最大日期值:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
http://www.w3schools.com/tags/att_input_max.asp

您用於設置日期的JavaScript不會對日期進行零填充,因此對於1月1日,您將獲得日期max =“ 2016-01-1”。 要保持您的JavaScript版本,請使用以下命令來填充日期:

<script>
      var input = document.getElementById("reqDate");
      var today = new Date();
      var day = today.getDate();

      // Set month to string to add leading 0
      var mon = new String(today.getMonth()+1); //January is 0!
      var yr = today.getFullYear();

        if(mon.length < 2) { mon = "0" + mon; }
        if(day.length < 2) { dayn = "0" + day; }

        var date = new String( yr + '-' + mon + '-' + day );

      input.disabled = false; 
      input.setAttribute('max', date);
</script>

以此為PHP腳本,可以簡化代碼,可以使用:

<input type="date" name="bday" max="<?=date('Y-m-d')?>">

注意:不同瀏覽器對input[type="date"]有所不同(請參閱http://caniuse.com/#feat=input-datetime )。

您可以通過檢查瀏覽器檢查器中的元素來確認使用的最大值是正確的受支持的RCF3339格式。

您是否嘗試在輸入中使用min屬性。 在html5中,我們可以采用正確的日期格式YYYY-MM-DD指定最小或最大屬性

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM