HTML5日期选择器防止过去的日期[重复]答案

【问题标题】：HTML5 datepicker prevent past dates [duplicate]HTML5日期选择器防止过去的日期[重复]
【发布时间】：2014-02-19 05:18:13
【问题描述】：

我正在开发一个预订电影票的网站。我应该将min 属性设置为什么，以防止 HTML5 日期选择器中的过去日期？（我不想使用here提到的PHP解决方案。）

有没有纯 HTML5/Javascript 解决方案？

【问题讨论】：

如果您实际上是指 HTML5 <input type="date">，而不是一些 jQuery 插件，那么设置 min="2014-01-01" 就足够了。
那将是静态的。如何让它动态化？
“动态”是什么意思？你总是可以使用 DOM 来操作属性，这都是标准的。

标签： javascript html

【解决方案1】：

当文档加载禁用日期输入时。运行 onload 函数，将今天的日期以所需格式插入到 min 字段中。

function onLoad() {
  var input = document.getElementById("dateField");
  var today = new Date();
  // Set month and day to string to add leading 0
  var day = new String(today.getDate());
  var mon = new String(today.getMonth()+1); //January is 0!
  var yr = today.getFullYear();

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

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

  input.disabled = false; 
  input.setAttribute('min', date);
}

document.addEventListener('load', onLoad, false);

<body>
  <input id="dateField" type="date" disabled  />
</body>

这是一个小提琴：http://jsfiddle.net/tj9Xh/2/

【讨论】：

我也将日期更新为字符串。现在是 27 号，所以直到事后我才想到个位数的日期。

【解决方案2】：

试试这个：

<input id="dateField" type="date"/>


 var dt= new Date();
   var yyyy = dt.getFullYear().toString();
   var mm = (dt.getMonth()+1).toString(); // getMonth() is zero-based
   var dd  = dt.getDate().toString();
   var min = yyyy +'-'+ (mm[1]?mm:"0"+mm[0]) +'-'+ (dd[1]?dd:"0"+dd[0]); // padding
alert(min);
$('#dateField').prop('min',min);

【讨论】：