У меня есть скрипт, который заполняет одно из полей в моей форме до сегодняшней даты, однако он работает только тогда, когда тип ввода установлен на «текст». PHP / SQL не примет это значение, так как для типа данных SQL установлено значение «date». Если бы кто-нибудь мог объяснить, как я мог бы сделать этот скрипт совместимым с типом ввода даты, я был бы очень признателен.

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

0
sinesine 7 Янв 2017 в 20:32

3 ответа

Лучший ответ

HTML <input type="date" /> поддерживает дату только в формате ISO (гггг-мм-дд). Таким образом, вы можете сделать это следующим образом.

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">
2
Ibrahim Khan 7 Янв 2017 в 17:40

Чтобы input принял формат даты, вы должны вставить строку даты в формате гггг-ММ-дд.

Так что поменяйте

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

Чтобы :

var today = year+'-'+month+'-'+day;
1
Ankush Gatfane 7 Янв 2017 в 17:46

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>
1
gaetanoM 7 Янв 2017 в 18:00