Как установить значение даты по умолчанию для типа ввода сегодня?

Question

Типы ввода HTML5 великолепны, новый встроенный инструмент выбора даты в Opera очень прост, и Chrome, по крайней мере, поддерживает новый тип ввода с помощью вращающегося колеса.

Но есть ли способ установить значение по умолчанию для поля даты на сегодняшнюю дату? С помощью Opera я могу выбрать «Сегодня» из палитры дат, и как только я нажимаю на любую из кнопок шагов в Chrome, она увеличивается / уменьшается по сравнению с сегодняшней датой.

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

Answer 1

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

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

TL; DR Использование YYYY-MM-DD формата даты или выигрышне отображается

Answer 2

Объект 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());
});​

Чистый JS:

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

Вы можете заполнить значение по умолчанию через 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);
});

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

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

Answer 6

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

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

Answer 7

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;

демо

Answer 8

В 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>

Answer 9

Если вы делаете что-либо связанное с датой и временем в браузере, вы хотите использовать 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>

Answer 10

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

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

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