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

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

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

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

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

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

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

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();

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

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);
});

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

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

Следуйте стандартному формату Ymd, если вы используете 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>

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

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

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

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

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());

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

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

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

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

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

В простейших решениях, похоже, не учитывается время 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

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

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

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

Короткий однострочный текст, который использует чистый 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()конструктора.

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

Значение даты в формате 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"); ?>">

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

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

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

по Javascript:

var today = new Date();

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

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

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

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

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

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

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

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

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

В самом 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, поэтому просто будьте осторожны :)

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

<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) %>" />

Ура!

Даже после всего этого времени это может кому-то помочь. Это простое решение 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"  />