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

403

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

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

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

Ян Браун
источник
может быть, это будет полезно stackoverflow.com/questions/14212527/…
Муса
Решение: stackoverflow.com/a/38801898/3147690
villamejia
4
переменная дата = новая дата (); // создаем объект даты var min_date = date.toISOString (). slice (0,10); //// получить текущую дату конкретной части "2018-02-02"
Günay Gültekin
<input type = "date" value = "ГГГГ-ММ-ДД" />
Борис Детри

Ответы:

288

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

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

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

Tak
источник
50
для пользователей .net: DateTime.Today.ToString ("yyyy-MM-dd")
dvdmn
3
Обратите внимание, что «0» перед месяцем и днем ​​обязательны: «2011-09-29» работает, «2011-9-29» - нет.
Нико
2
Руби: (также)DateTime.now.strftime("%Y-%m-%d")
Адам Грант
43
@MartinBarker, не правда ли, date('Y-m-d')ведь для этого нужен ведущий ноль?
SGR
15
Для JavaScript: myDate.toLocaleDateString('en-CA')делает трюк
Ulysse BN
218

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();
brianary
источник
1
Остерегайтесь, если вы поддерживаете мобильный. На Android 4.0.3 (по крайней мере) у меня были проблемы, когда новая дата, выбранная с помощью всплывающего элемента управления датой, добавляется к текущей дате, а не заменяет ее. Например, вы можете получить 2013-03-252013-03-27, а не 2013-03-25, и пользователь не сможет изменить его.
Бен Клейтон,
1
@Web_Designer Достаточно справедливо. local.setMinutes(this.getMinutes() - this.getTimezoneOffset());Сначала вы захотите скорректировать с (так как этот ответ в конечном итоге получится ), затем.
Брианария
1
Это только устанавливает свойство value , но не устанавливает атрибут, поэтому, если форма сбрасывается, по умолчанию она не имеет значения. Кроме того, было бы намного понятнее использовать toISOString , которую в любом случае вызывает toJSON .
RobG
1
@apraetor На самом деле все наоборот, поскольку поддерживаются только браузеры, поддерживающие ввод даты (исключая valueAsDateIE, Firefox, возможно Safari, в основном все, кроме Chrome, Opera, Edge и некоторых мобильных браузеров). Все поддерживает valueсвойство, используемое моим решением, даже если ввод даты возвращается к вводу текста в неподдерживающих браузерах, другое решение приведет к ошибке или неудаче.
brianary
2
Этот ответ сработал для меня с помощью input[type=datetime-local]и изменив его на slice(0,19)HTH
jcruz
189

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

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

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

Андре
источник
1
это работает во всех браузерах? а мобильные версии тоже? Проверено?
Усман Юнас
2
@UsmanY Это часть спецификации HTML5, поэтому все, что поддерживает типы ввода HTML5, должно поддерживать valueAsDate. html.spec.whatwg.org/multipage/forms.html#dom-input-valueasdate
wersimmon
@harbichidian Предложение для ввода даты на некоторое время предшествует предложению для valueAsDate. У вас есть ссылка на поддержку браузера для этого свойства?
brianary
3
Дата будет конвертирована в время UTC. Если вы находитесь в 18:00 2018-03-27 в -0600 и вы установили valueAsDateдля new Date(), значение поля будет установлено в 2018-03-28. См. Austinfrance.wordpress.com/2012/07/09/…
Aupajo
1
Как сказал @Aupajo, это устанавливает неправильную дату, если вы не хотите использовать время UTC.
ADJenks
81

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

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

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

Ишам Мохамед
источник
64
Ваш ответ полностью зависит от php.
Йеко
1
Если ваша контактная форма находится на странице PHP (например, на странице WordPress или шорткода), это работает отлично. Большое спасибо Ишам!
tristanojbacon
5
Вы можете уменьшить избыточность, перейдя <?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?>на<?php echo date('Y-m-d'); ?>
Мюррей Смит
7
Это устанавливает дату в соответствии с датой создания (на сервере, в часовом поясе сервера) HTML-документа. Это не должно соответствовать текущей дате, так как фактически заполняет поле. Клиентский JavaScript лучше, если вам нужно делать то, что зависит от пользователя.
Юкка К. Корпела
1
Вы также можете использовать короткий тег <? = date ('Ym-d'); ?>. Одно "эхо" меньше
sashok_bg
36

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

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

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

Джефф
источник
В Opera (протестировано на Opera 12 / Windows) это не работает, если вы не ставите ведущие нули в месяц и день.
Ренато
31

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

<input type="date" value="<?php echo date("Y-m-d"); ?>">
Шухад Заман
источник
2
Вы должны отметить, что этот ответ работает, если вы используете php, это не так для всех.
Motassem MK
24

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;

демонстрация


источник
22

В 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>
Юкка К. Корпела
источник
6
Или, если вы хотите, чтобы он был совместим с Y10K:= new Date().toISOString().split('T')[0];
Blazemonger
1
toISOString возвращает дату и время UTC, поэтому может не отображать правильную дату для часового пояса пользователя. Например, если пользователь UTC + 0800, то с полуночи до 08:00 он получит вчерашнюю дату.
RobG
18

Если вы делаете что-то связанное с датой и временем в браузере, вы хотите использовать 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>
Габриэль Гарсия
источник
Если у вас уже есть функция moment () или вы планируете выполнять больше работы с датами в своем веб-приложении, это решение не составит труда. Момент решает так много вопросов.
Secretwep
10

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

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

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

Умайр Халид
источник
8

Javascript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

Jquery

$('#date-field').val(new Date().toISOString().slice(0, 10));

Другой вариант

Если вы хотите настроить дату, месяц и год, просто сделайте сумму или сабвуфер, как хотите 😎 Для месяца начинается форма 0, поэтому необходимо суммировать 1 с месяцем.

function today() {
        let d = new Date();
        let currDate = d.getDate();
        let currMonth = d.getMonth()+1;
        let currYear = d.getFullYear();
        return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
    }

Применить функцию сегодня

document.getElementById('date-field').value = today();

$('#date-field').val(today());
Доктор медицинских наук Иясин Арафат
источник
7

Очень просто, просто используйте серверные языки, такие как 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>
teshguru
источник
7
<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" />

Santanu
источник
5

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

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />
user2615287
источник
5

Для NodeJS (экспресс с шаблонами SWIG):

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />
CodeValve
источник
5

В простейших решениях, похоже, не учитывается время 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
Dexygen
источник
Вы должны указать, какому свойству элемента ввода назначить его. valueили valueAsDate? Выглядит хорошо, хотя.
ADJenks
4

Это то, что я сделал в своем коде, я только что протестировал, и он работал нормально, 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>

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

Гумбы
источник
1
Привет и добро пожаловать в SO. Пожалуйста, добавьте больше информации для поддержки вашего кода и убедитесь, что тот, кто задает вопрос, хочет решения на основе PHP.
Шива
4

Оба топовых ответа неверны.

Короткий однострочный текст, который использует чистый JavaScript, учитывает местный часовой пояс и не требует определения дополнительных функций:

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;
<input id='date-input' type='date'>

Получает текущую дату и время в миллисекундах (начиная с эпохи) и применяет смещение часового пояса в миллисекундах (минуты * 60k минут на миллисекунду).

Вы можете установить дату, используя, element.valueAsDateно тогда у вас есть дополнительный вызов Date()конструктора.

rovyko
источник
4

Это то, что вам действительно нужно делать на стороне сервера, поскольку формат локального времени каждого пользователя отличается, не говоря уже о том, что каждый браузер ведет себя по-разному.

Значение даты в формате HTML должно быть в следующем формате: гггг-мм-дд, иначе значение не будет отображаться.

ASP CLASSIC, ИЛИ VBSCRIPT:

current_year = DatePart("yyyy",date) 
current_month = DatePart("m",date) 
current_day = DatePart("d",date) 

IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF

get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

Выход на сегодняшнюю дату: 2019-02-08

Тогда в вашем HTML: <input type="date" value="<% =get_date %>"

PHP

просто используйте это: <input type="date" value="<?= date("Y-m-d"); ?>">

csandreas1
источник
4

Это очень просто, применяя следующий код, используя PHP

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

Функция Date возвращает текущую дату, принимая дату в time().

Gowtham Ag
источник
2

по Javascript:

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
Charnstyle
источник
2
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
kingsuede
источник
1
Пожалуйста, добавьте описание с вашим ответом.
Бава г
1

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

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />
Шон
источник
1

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

<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>
gajam
источник
1
@GeorgeJempty Это не так, если текущее время в UTC отличается от текущего дня. Он вернет текущую дату в UTC, а не в вашем местном часовом поясе.
ADJenks
@adjenks Хех, я вижу, что это было идеальное время для меня, чтобы проверить, 10 минут до полуночи
Dexygen
@adjenks Я наконец-то вычеркнул полдюжины строк, которые избегают ловушки UTC и слегка улучшают пару существующих похожих ответов jQuery / non-ES6: stackoverflow.com/a/54341296/34806
Dexygen
У ответа есть дополнительный «)» в конце строки и посторонние выражения вокруг «новой даты ()». Должно быть: document.querySelector('.set-today').value=new Date().toISOString().substr(0,10);
Кирби Л. Уоллес
0

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

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

stslavik
источник
0

У меня была такая же проблема, и я исправил ее с помощью простого 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-скрипт должен находиться в последней строке кода или после ввода, потому что, если вы поместите этот код раньше, скрипт не найдет ваш ввод.

Marlon
источник
2
Если вы все равно используете PHP, зачем использовать JavaScript ?
Blazemonger
0

В самом 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 в том же формате, что и входное значение, и заполните ее годом, месяцем и днем, выбранными из текущей даты и вуаля! У вас есть заранее выбранная дата!

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

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

Если вы хотите, чтобы поле ввода было вложено в 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 года назад), но мне все еще потребовалось некоторое время, чтобы найти определенный ответ в Интернете, так что это идет на пользу любому, кто ищет ответ, когда бы он ни был, и надеется на это всем очень помогает :)

Другое Править:

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

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

SteppingHat
источник
0

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

<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>
Нихил ШЕТ
источник
3
Пожалуйста, пожалуйста, пожалуйста, не используйте document.write в реальных приложениях - с ним очень много проблем.
Питер Харт
Питер, можешь объяснить, в чем проблема? ты получил ?
Nikhil SHETH
Питер, также упомяните, как вы получаете текущую дату в качестве значения по умолчанию в типе ввода = дата
Nikhil sHETH
1
Дело не в том, что это не работает, а в том, что в общем случае это плохая практика - использовать document.write. Есть множество причин, почему это так, вот несколько примеров: stackoverflow.com/questions/802854/… Если бы мне абсолютно необходимо было сделать это в javascript на клиенте, я бы использовал id для элемента и документа. getElementById, чтобы получить элемент и изменить его, аналогично некоторым другим ответам на этой странице.
Питер Харт
0

И для тех, кто использует 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) %>" />

Ура!

Райан Данфи
источник
0

Даже после всего этого времени это может кому-то помочь. Это простое решение JS.

JS

  let date = new Date();
  let today = date.toISOString().substr(0, 10);
  //console.log("Today: ", today);//test
  document.getElementById("form-container").innerHTML =
    '<input type="date" name="myDate" value="' + today + '" >';//inject field

HTML

 <form id="form-container"></form>

Подобное решение работает в Angular без какой-либо дополнительной библиотеки для преобразования формата даты. Для Angular (код сокращен из-за общего кода компонента):

//so in myComponent.ts 
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
   //constructor, etc.... 
   ngOnInit() {
      this.today = this.date.toISOString().substr(0, 10);
   }
}
//so in component.html 
<input type="date" [(ngModel)]="today"  />
StefaDesign
источник
Это слишком громоздко для того, чтобы просто использовать значение по умолчанию.
реформирован
Какой из двух независимых примеров вы пытаетесь указать? Его 4 строки кода в обоих примерах .... Первый пример - чистый html + js, поэтому создайте контейнер и скопируйте код вставки из 3 строк, если вы не считаете комментарии. То же самое для углового примера, который был причиной, по которой я оставил комментарий. Не уверен, что вы имели в виду ....
StefaDesign