Question

我有一个脚本，可以将表单中的某个字段填充到今天的日期，但只有当输入类型设置为＆＃39; text＆＃39;时才会生效。由于SQL数据类型设置为＆＃39; date＆＃39;，PHP / SQL不接受此值。如果有人能解释我如何使这个脚本与日期输入类型兼容，我将非常感激。

HTML：

<div class="form-group">
    <label class="control-label" for="flight_date">Date</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
        </div>
        <input id="flight_date" type="date" class="form-control" maxlength="10" name="flight_date">
    </div>
</div>

jQuery的：

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = day + "/" + month + "/" + year;

document.getElementById('flight_date').value = today;

JSFiddle

Answer 1

Html <input type="date" />仅支持ISO格式（yyyy-mm-dd）格式的日期。所以你可以这样做。

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year +"-" + month + "-" + day;

document.getElementById('flight_date').value = today;

<input id="flight_date" type="date" class="form-control" maxlength="10" name="flight_date">

Answer 2

要使input接受日期格式，您必须以yyyy-MM-dd格式插入日期字符串。

所以改变：

var today = day + "/" + month + "/" + year;

为：

var today = year+'-'+month+'-'+day;

Answer 3

HTMLInputElement并不总是在所有浏览器中公开属性“valueAsDate”。

valueAsDate.polyfill.js提供了在IE和FF上扩展此属性的可能性。

结果是：

if(!("valueAsDate" in HTMLInputElement.prototype)){
  Object.defineProperty(HTMLInputElement.prototype, "valueAsDate", {
    get: function(){
      var d = this.value.split(/\D/);
      return new Date(d[0], --d[1], d[2]);
    },
    set: function(d){
      var day = ("0" + d.getDate()).slice(-2),
          month = ("0" + (d.getMonth() + 1)).slice(-2),
          datestr = d.getFullYear()+"-"+month+"-"+day;
      this.value = datestr;
    }
  });
}


var date = new Date();
document.getElementById('flight_date').valueAsDate = date;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="form-group">
    <label class="control-label" for="flight_date">Date</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
        </div>
        <input id="flight_date" type="date" class="form-control" maxlength="10" name="flight_date">
    </div>
</div>

jQuery日期脚本不会填充字段，除非它是文本输入类型

3 个答案: