HTML5 Тип ввода Дата - Значение по умолчанию на сегодня?

Как и любое поле ввода HTML, браузер оставит его пустым, если значение по умолчанию не указано с атрибутом value.

К сожалению, HTML5 не предоставляет способ указания "сегодня" в атрибуте value (который я вижу), только RFC3339 действительная дата, например 2011-09-29. Извините, это не помогает!

Объект JavaScript Date обеспечивает достаточную встроенную поддержку требуемого формата, чтобы избежать его вручную:

Добавьте это для правильной поддержки часового пояса:

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});

JQuery:

$(document).ready( function() {
    $('#datePicker').val(new Date().toDateInputValue());
});​

Pure JS:

document.getElementById('datePicker').value = new Date().toDateInputValue();

это работает для меня:

document.getElementById('datePicker').valueAsDate = new Date();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Следующий код работает хорошо:

<input type="date" value="<?php echo date('Y-m-d'); ?>" />

Обратите внимание, что это зависит от PHP.

Вы можете заполнить значение по умолчанию через javascript, как показано здесь: http://jsfiddle.net/7LXPq/

$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = "0" + month;
    if (day < 10) 
        day = "0" + day;
    var today = now.getFullYear() + '-' + month + '-' + day;
    $('#datePicker').val(today);
});

Возможно, я бы выделил немного дополнительного времени, чтобы увидеть, являются ли месяц и дата однозначными, и поставить перед ними дополнительный ноль... но это должно дать вам представление.

РЕДАКТИРОВАТЬ: Добавлена проверка на дополнительный ноль

Следуйте стандартным форматам Y-m-d, если вы используете PHP

<input type="date" value="<?php echo date("Y-m-d"); ?>">

HTML

<input type="date" id="theDate">

JS

$(document).ready(function() {
    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;       
    $("#theDate").attr("value", today);
});

демо

Если вы не хотите использовать jQuery, вы можете сделать что-то вроде этого

HTML

<input type="date" id="theDate">

JS

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("theDate").value = today;

демо

В HTML5 как таковой нет способа установить значение по умолчанию для поля даты на сегодняшнюю дату? Как показано в других ответах, значение может быть установлено с помощью JavaScript, и это, как правило, лучший подход, если вы хотите установить значение по умолчанию в соответствии с текущей датой для пользователя при загрузке страницы.

HTML5 определяет свойство valueAsDate для элементов input type=date, и используя его, вы можете установить начальное значение непосредственно из созданного объекта, например. на new Date(). Однако, например, IE 10 не знает этого свойства. (Он также не имеет подлинной поддержки input type=date, но это другая проблема.)

Таким образом, на практике вам нужно установить свойство value, и оно должно быть в соответствии с ISO 8601. В настоящее время это можно сделать довольно легко, поскольку мы можем ожидать, что текущие используемые браузеры будут поддерживать метод toISOString:

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

Если вы делаете что-то, связанное с датой и временем в brower, вы хотите использовать Moment.js:

moment().format('YYYY-MM-DD');

moment() возвращает объект, представляющий текущую дату и время. Затем вы вызываете его метод .format(), чтобы получить строковое представление в соответствии с указанным форматом. В этом случае YYYY-MM-DD.

Полный пример:

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>

Возможное решение

document.getElementById("yourDatePicker").valueAsDate = new Date()

JSFiddle пример

используйте moment.js для решения этой проблемы в двух строках, Тип ввода даты html5 принимает только этот формат "ГГГГ-ММ-ДД". Я решаю свою проблему таким образом.

var today = moment().format('YYYY-MM-DD');
 $('#datePicker').val(today);

Это самый простой способ решить эту проблему.

Очень просто, просто используйте серверные языки, такие как PHP, ASP, JAVA или даже вы можете использовать javascript.

Вот решение

<?php
  $timezone = "Asia/Colombo";
  date_default_timezone_set($timezone);
  $today = date("Y-m-d");
?>
<html>
  <body>
    <input type="date" value="<?php echo $today; ?>">
  </body>
</html>

Это то, что я сделал в своем коде, я только что протестировал и работал нормально, input type = "date" не поддерживает автоматический набор curdate, поэтому способ, которым я использовал это ограничение, заключался в том, что PHP-код был простым такой код.

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo "<label for='submission_date'>Data de submissão</label>";
                echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
            ?>
        </form>
    </body>
</html>

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

если вам нужно заполнить ввод datetime, вы можете использовать это:

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />

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

$(document).ready( function() {
    var now = new Date();
 
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);

    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;


   $('#datePicker').val(today);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

В простейших решениях, как представляется, не учитывается время UTC, в том числе с высоким рейтингом. Ниже приведена упрощенная версия ES6, не являющаяся jQuery, пары существующих ответов:

const today = (function() {
    const now = new Date();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    return '${now.getFullYear()}-${month}-${day}';
})();
console.log(today); // as of posting this answer: 2019-01-24

Для NodeJS (Express с шаблонами SWIG):

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />

new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)

по Javascript:

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

Простое решение !!

<input class="set-today" type="date">
<script type="text/javascript">
window.onload= function(){
document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
}
</script>

Если вы используете ruby, вы можете использовать это, чтобы установить значение по умолчанию для сегодняшней даты и времени:

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />

В самом HTML не используется метод по умолчанию, чтобы вставлять текущую дату в поле ввода. Однако, как и любое другое поле ввода, оно принимает значение.

Вы можете использовать PHP для извлечения текущей даты и ввода ее в поле значения элемента формы.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";

    // Send to the browser the input field with the value set with the date string
    echo "<input type='date' value='$date_string' />";
?>

Поле значения принимает формат YYYY-MM-DD как вход так просто, создав переменную $date_string в том же формате, в котором принимает входное значение, и заполняет его годом, месяцем и днем, полученным с сегодняшней даты и вуаля! У вас есть выбранная дата!

Надеюсь, что это поможет:)

Edit:

Если вы хотите, чтобы поле ввода было вложено внутри HTML, а не PHP, вы могли бы сделать следующее.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type="date" value="<?php print($date_string); ?>" />
        </form>
    </body>
</html>

Я понимаю, что этот вопрос был задан некоторое время назад (2 года назад), но мне все же потребовалось некоторое время, чтобы найти определенный ответ в Интернете, так что это будет служить любому, кто ищет ответ, когда это может быть и надеюсь, что это поможет всем очень:)

Другое Редактировать:

Почти забыл, что в прошлом для меня была королевская боль, всегда забываю устанавливать часовой пояс по умолчанию при создании script в PHP, который использует функцию date().

Синтаксис date_default_timezone_set(...);. Документацию можно найти здесь, на PHP.net и список поддерживаемых часовых поясов для вставить в эту функцию можно здесь. Это всегда было неприятно, так как я нахожусь в Австралии, все всегда откладывается на 10 часов, если я не установил это правильно, поскольку по умолчанию он соответствует UTC + 0000, где мне нужен UTC + 1000, поэтому будьте осторожны:)

У меня была та же проблема, и я исправил ее с помощью простого JS. Вход:

<input type="date" name="dateOrder" id="dateOrder"  required="required">

JS

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

Важно: JS script должен находиться в последней строке кода или после ввода, потому что если вы поместите этот код раньше, script не найдет ваш вход.

Вот простой способ сделать это с помощью javascript.

    var date = new Date();
    var datestring = ('0000' + date.getFullYear()).slice(-4) + '-' + ('00' + (date.getMonth() + 1)).slice(-2) + '-' + ('00' + date.getDate()).slice(-2) + 'T'+  ('00' +  date.getHours()).slice(-2) + ':'+ ('00' + date.getMinutes()).slice(-2) +'Z';
    document.getElementById('MyDateTimeInputElement').value = datestring;

Спасибо, peter, теперь я меняю свой код.

<input type='date' id='d1' name='d1'>

<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>

И для тех, кто использует ASP VBScript

<%
'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart("d", strDate)
strMonth = DatePart("m", strDate)
strYear = DatePart("yyyy", strDate)
If strDay < 10 Then
  strDay = "0" & strDay
End If
If strMonth < 10 Then
  strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

И затем в теле ваш элемент должен выглядеть примерно так.

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

Ура!

Так как не существует метода по умолчанию для установки значения для сегодняшней даты, я бы сказал, что это должно зависеть от его приложения. Если вы хотите максимально увеличить аудиторию аудитории при выборе даты, используйте серверную script (PHP, ASP и т.д.), Чтобы установить значение по умолчанию.

Однако, если это для консоли администрирования CMS, и вы знаете, что пользователь всегда будет доверять JS или вашему сайту, тогда вы можете безопасно использовать JS для заполнения значения по умолчанию, как в jlbruno.