Datetime-local установить часы по умолчанию - PullRequest
Новая
       21

Datetime-local установить часы по умолчанию

1 голос
/ 19 апреля 2019

Я использую следующий ввод: 

<input id="creation-from-date" type="datetime-local"/>

Я хотел бы знать, если есть способ установить часы по умолчанию, как это: дд / мм / гггг 00: 00

Поскольку средство выбора даты позволяет выбирать только дату, а не время, поэтому я получаю недопустимую дату на стороне JS, потому что часы не установлены.

Я использую Chrome v73.0.3683.75

Большое спасибо!

Ответы [ 3 ]

1 голос
/ 19 апреля 2019

Я бы использовал <input type='date' /> и <input type='time' /> вместо: 

//<![CDATA[
/* external.js */
var doc, bod, I, DateTime; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
  return doc.getElementById(id);
}
DateTime = function(dateElement, timeElement, dateInstance){
  var t = this;
  this.dateElement = dateElement; this.timeElement = timeElement;
  this.date = dateInstance instanceof Date ? dateInstance : new Date;

  this.dateValue = function(dateInstance){
    if(dateInstance instanceof Date)this.date = dateInstance;
    var dt = this.date;
    return dt.getFullYear()+'-'+(dt.getMonth()+1).toString().replace(/^(\d)$/, '0$1')+'-'+dt.getDate().toString().replace(/^(\d)$/, '0$1');
  }
  this.showDate = function(dateInstance){
    this.dateElement.value = this.dateValue(dateInstance);
    return this;
  }
  this.timeValue = function(dateInstance){
    if(dateInstance instanceof Date)this.date = dateInstance;
    var dt = this.date;
    return dt.getHours().toString().replace(/^(\d)$/, '0$1')+':'+dt.getMinutes().toString().replace(/^(\d)$/, '0$1');
  }
  this.showTime = function(dateInstance){
    this.timeElement.value = this.timeValue(dateInstance);
    return this;
  }
  this.showDate().showTime();
  this.dateChange = function(changeFunc, noTimeFunc){
    this.dateElement.oninput = function(){
      var v = this.value, s = t.timeElement.value;
      if(v === '')v = this.value = t.dateValue(noTimeFunc(t));
      if(s === '')s = t.timeValue(this.date);
      t.date = new Date(v+' '+s); changeFunc(t.date, t);
    }
    return this;
  }
  this.timeChange = function(changeFunc, noTimeFunc){
    this.timeElement.oninput = function(){
      var v = this.value, s = t.dateElement.value;
      if(v === '')v = this.value = t.timeValue(noTimeFunc(t));
      if(s === '')s = t.dateValue(this.date);
      t.date = new Date(s+' '+v); changeFunc(t.date, t);
    }
    return this;
  }
}
var dateElement = I('date'), timeElement = I('time');
function threeHoursLater(){
  return new Date(Date.now()+10800000);
}
var dt = new DateTime(dateElement, timeElement, threeHoursLater()); //  3 hours from now - initial date time set
function consoleIt(dateInstance){
  console.log('display of dt.date --> '+dateInstance.toString());
  console.log('dt.date for server --> '+dateInstance.getTime());
}
consoleIt(dt.date);
dt.dateChange(function(r){
  consoleIt(r);
}, threeHoursLater).timeChange(function(a){
  consoleIt(a);
}, threeHoursLater);
}); // end load
//]]>
<input id='date' type='date' />
<input id='time' type='time' />

Закройте эти входы и посмотрите, что произойдет! О, убедитесь, что вы подтвердили эти даты на вашем сервере. Клиент может быть изменен.

Я обновил код выше, чтобы включить конструктор DateTime. Аргументы должны быть ясными.

PS

Я заметил, что есть проблема в Firefox 67.0 (64-битная версия) с событиями изменения, в Элементах, которые не получают фокус в первую очередь, поэтому .onchange был изменен на .oninput, который, кажется, работает по всем направлениям.

0 голосов
/ 19 апреля 2019

Попробуйте добавить для него дату по умолчанию 

document.getElementById("creation-from-date").value = setDefautValue();
    function setDefautValue() {
        var date = new Date(); // today
        date.setUTCHours(0, 0, 0, 0); //set default time 00:00 AM
        const dStr = date.toISOString()
        // remove seconds and milliseconds
        return dStr.substring(0, dStr.indexOf(':', dStr.indexOf(':')+1))
    }
0 голосов
/ 19 апреля 2019

Вы можете попробовать использовать дату Javascripts: 

$("creation-from-date").val(new Date().toLocalString());
// toLocalString() will return the local time while toISOString() will return the UTC time.

Здесь хорошее расширение jQuery , которое очень полезно для инициализации datetime и datetime-local входных данных: 

// To initialize, simply call the method:
$('input[type="datetime-local"]').setNow();

Надеюсь, это поможет.

...