Question

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

是否有纯HTML5 / Javascript解决方案？

Answer 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/

Answer 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);

HTML5 datepicker会阻止过去的日期

2 个答案: