Як встановити значення типової дати введення за замовчуванням на сьогодні?

Типи введення HTML5 чудові, новий вбудований інструмент вибору дати Opera - вітер, а Chrome, принаймні, підтримує новий тип введення з реалізацією закрутки.

Але чи є спосіб встановити значення за замовчуванням поля дати на сьогоднішню дату? У Opera я можу вибрати "Сьогодні" з вибору дати, і як тільки я натискаю будь-яку з крок кнопок у Chrome, вона збільшується / зменшується від сьогоднішньої дати.

Я не соромлюсь кодувати рішення цієї незначної проблеми, але мені здається нерозумним, що обидва браузери повністю усвідомлюють поточну дату, але автоматично не з’являться (хоча б як заповнювач).

Як і будь-яке поле введення HTML, браузер не залишить його порожнім, якщо за valueатрибутом не вказано значення за замовчуванням .

На жаль, HTML5 не дає способу вказати "сьогодні" в valueатрибуті (що я бачу), як тільки RFC3339, дійсна дата 2011-09-29.

TL; DR Використовуйте YYYY-MM-DDформат дати або він не відображатиметься

Об'єкт дати JavaScript надає достатню вбудовану підтримку необхідного формату, щоб уникнути цього вручну:

Додайте це для правильної підтримки часового поясу:

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

Я, мабуть, поставив би трохи зайвого часу, щоб побачити, чи є місяць і дата одноцифровими, і префікс їх із додатковим нулем ... але це повинно дати вам уявлення.

EDIT: Додано чек на додатковий нуль

Дотримуйтесь стандартного формату 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>

використовуйте moment.js для вирішення цього питання у 2 рядках, тип введення дати html5 приймає лише "YYYY-MM-DD" цього формату. Я вирішую свою проблему таким чином.

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

Це те, що я зробив у своєму коді, я щойно перевірив, і він спрацював нормально, type 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'>

Це отримує поточний час дати в мілісекундах (з епохи) і застосовує зміщення часового поясу в мілісекундах (хв * 60 кхв на мілісекунд).

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

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

Значення введених дат Html має бути у такому форматі: yyyy-mm-dd, інакше воно не відображатиме значення.

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()); ?>" />

Функція дати поверне поточну дату, приймаючи дату в 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)

Якщо ви використовуєте рубін, ви можете використовувати це, щоб встановити значення за замовчуванням на сьогоднішню дату та час:

<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 в тому самому форматі, що вхідне значення приймає і заповнює його роком, місяцем і днем, що вибирається з сьогоднішньої дати та voilá! Ви самі вибрали дату!

Сподіваюся, це допомагає :)

Редагувати:

Якщо ви хочете, щоб поле введення було вкладено в 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"  />