Como definir o valor padrão da data do tipo de entrada para hoje?

Os tipos de entrada HTML5 são ótimos, o novo seletor de datas interno do Opera é muito fácil, e o Chrome pelo menos deu suporte ao novo tipo de entrada com uma implementação de roda giratória.

Mas existe alguma maneira de definir o valor padrão do campo de data para a data de hoje? Com o Opera, posso escolher 'Hoje' no seletor de datas e, assim que clico em um dos botões da etapa no Chrome, ele aumenta / diminui a partir da data de hoje.

Não tenho vergonha de codificar uma solução para esse pequeno problema, mas me parece tolo que os dois navegadores estejam totalmente cientes da data atual, mas não a apareçam automaticamente (pelo menos como espaço reservado).

Como qualquer campo de entrada HTML, o navegador o deixará vazio, a menos que um valor padrão seja especificado com o valueatributo

Infelizmente, o HTML5 não fornece uma maneira de especificar 'today' no valueatributo (que eu posso ver), apenas uma data válida RFC3339 como 2011-09-29.

TL; DR Use o YYYY-MM-DDformato da data ou ele não será exibido

O objeto JavaScript Date fornece suporte interno suficiente para o formato necessário para evitar fazê-lo manualmente:

Adicione isso para suporte correto ao fuso horário:

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

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

isso funciona para mim:

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

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

O código a seguir funciona bem:

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

Observe que isso depende do PHP.

Você pode preencher o valor padrão através do javascript, como visto aqui: 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);
});

Eu provavelmente dedicaria um pouco de tempo extra para ver se o mês e a data são dígitos únicos e prefixo-os com o zero extra ... mas isso deve lhe dar uma idéia.

EDIT: verificação adicionada para o zero extra

Siga o formato Ymd padrão, se você estiver usando 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);
});

demonstração

Se você não quiser usar o jQuery, poderá fazer algo assim

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;

demonstração

No HTML5, como tal, não há como definir o valor padrão do campo de data para a data de hoje? Conforme mostrado em outras respostas, o valor pode ser definido usando JavaScript, e essa geralmente é a melhor abordagem, se você desejar definir o padrão de acordo com a data atual para o usuário quando a página for carregada.

O HTML5 define a valueAsDatepropriedade dos input type=dateelementos e, usando-o, você pode definir o valor inicial diretamente de um objeto criado, por exemplo, por new Date(). No entanto, por exemplo, o IE 10 não conhece essa propriedade. (Também falta suporte genuíno input type=date, mas isso é uma questão diferente.)

Portanto, na prática, você precisa definir a valuepropriedade e ela deve estar na notação de conformidade ISO 8601. Atualmente, isso pode ser feito com bastante facilidade, pois podemos esperar que os navegadores usados ​​atualmente suportem o toISOStringmétodo:

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

Se você estiver fazendo algo relacionado à data e hora no navegador, use o Moment.js :

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

moment()retorna um objeto que representa a data e hora atuais. Você chama o .format()método para obter uma representação de seqüência de caracteres de acordo com o formato especificado. Nesse caso YYYY-MM-DD,.

Exemplo completo:

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

use moment.js para resolver esse problema em duas linhas; o tipo de entrada de data html5 aceita apenas "AAAA-MM-DD" neste formato. Eu resolvo meu problema dessa maneira.

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

Essa é a maneira mais simples de resolver esse problema.

Javascript

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

Jquery

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

Outra opção

Se você deseja personalizar a data, o mês e o ano, basta somar ou subtrair como desejar. 😎 Para o mês é iniciado o formulário 0, por isso é necessário somar 1 com o mês.

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

Appy a função hoje

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

$('#date-field').val(today());

Muito simples, basta usar linguagens do lado do servidor como PHP, ASP, JAVA ou até mesmo você pode usar javascript.

Aqui está a solução

<?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" />

se você precisar preencher a data e hora da entrada, poderá usar isto:

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

Para NodeJS (modelos Express com SWIG):

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

As soluções mais simples parecem ignorar que o horário UTC será usado, incluindo os altamente votados. Abaixo está uma versão simplificada, ES6, não-jQuery, de algumas respostas existentes:

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

Isto é o que eu fiz no meu código, eu apenas testei e funcionou bem, o tipo de entrada = "date" não suporta a definição automática de curdate, então a maneira que eu usei para superar essa limitação foi usar o código PHP como um código simples como este .

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

Espero que ajude!

As duas principais respostas estão incorretas.

Uma linha única curta que usa JavaScript puro, é responsável pelo fuso horário local e não requer a definição de funções extras:

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

<input id='date-input' type='date'>

Isso obtém o horário atual em milissegundos (desde a época) e aplica o deslocamento do fuso horário em milissegundos (minutos * 60k minutos por milissegundo).

Você pode definir a data usando, element.valueAsDatemas terá uma chamada extra para o Date()construtor.

Isso é algo que você realmente precisa fazer no lado do servidor, pois o formato da hora local de cada usuário difere, sem mencionar que cada navegador se comporta de maneira diferente.

O valor das entradas de data em HTML deve estar neste formato: aaaa-mm-dd, caso contrário, ele não mostrará um valor.

ASP CLASSIC OU 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

Saída da data de hoje: 2019-02-08

Então, no seu html: <input type="date" value="<% =get_date %>"

PHP

basta usar isso: <input type="date" value="<?= date("Y-m-d"); ?>">

Isso é muito simples aplicando o seguinte código, Using PHP

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

A função de data retornará a data atual, tendo a data em time().

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

Se você estiver usando ruby, poderá usar isso para definir o valor padrão para a data e hora de hoje:

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

Uma solução simples:

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

Como não existe um método padrão de definir o valor para a data de hoje, eu diria que isso deve depender de sua aplicação. Se você deseja maximizar a exposição do seu público ao seletor de datas, use um script do lado do servidor (PHP, ASP, etc.) para definir o valor padrão.

No entanto, se for para o console de administração do CMS e você souber que o usuário sempre terá o JS em seu site ou confiável, poderá usá-lo com segurança para preencher o valor padrão, conforme jlbruno.

Eu tive o mesmo problema e o corrigi com JS simples. A entrada:

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

o JS

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

Importante: o script JS deve estar na última linha do código ou depois da entrada, porque se você colocar esse código antes, o script não encontrará sua entrada.

Não existe um método padrão no próprio HTML para inserir a data de hoje no campo de entrada. No entanto, como qualquer outro campo de entrada, ele aceitará um valor.

Você pode usar o PHP para buscar a data de hoje e inseri-la no campo de valor do elemento do formulário.

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

O campo de valor aceita o formato AAAA-MM-DD como entrada, simplesmente criando uma variável $date_stringno mesmo formato que o valor de entrada aceita e preenchendo-o com o ano, mês e dia buscado a partir da data de hoje e pronto! Você tem uma data pré-selecionada!

Espero que isto ajude :)

Editar:

Se você deseja aninhar o campo de entrada no HTML, e não no PHP, faça o seguinte.

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

Sei que essa pergunta foi feita há um tempo (dois anos atrás), mas ainda demorei um pouco para encontrar uma resposta definitiva na internet, então isso serve para quem procura a resposta sempre que possível e espero que seja. ajuda a todos muito :)

Outra edição:

Quase esqueci, algo que foi uma dor real para mim no passado é sempre esquecer de definir o fuso horário padrão sempre que criar um script em PHP que utilize a função date ().

A sintaxe é date_default_timezone_set(...);. A documentação pode ser encontrada aqui no PHP.net e a lista de fusos horários suportados para inserir na função pode ser encontrada aqui . Isso sempre foi chato, já que estou na Austrália; tudo é sempre adiado por 10 horas, se eu não definir isso corretamente, pois o padrão é UTC + 0000, onde eu preciso do UTC + 1000, portanto, seja cauteloso :)

Obrigado Peter, agora eu mudo meu código.

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

E para aqueles que usam 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
%>

E então no corpo, seu elemento deve ser algo como isto

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

Felicidades!

Mesmo depois de todo esse tempo, isso pode ajudar alguém. Esta é uma solução JS simples.

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>

Solução semelhante funciona no Angular sem nenhuma biblioteca adicional para converter o formato da data. Para Angular (o código é reduzido devido ao código do componente comum):

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