¿Cómo establecer el valor predeterminado de la fecha del tipo de entrada para hoy?

Los tipos de entrada HTML5 son geniales, el nuevo selector de fecha incorporado de Opera es muy sencillo, y Chrome al menos ha admitido el nuevo tipo de entrada con una implementación de rueda giratoria.

Pero, ¿hay alguna forma de establecer el valor predeterminado del campo de fecha en la fecha de hoy? Con Opera, puedo elegir 'Hoy' en el selector de fechas, y tan pronto como hago clic en cualquiera de los botones de paso en Chrome, aumenta / disminuye a partir de la fecha de hoy.

No soy tímido para codificar una solución a este problema menor, pero me parece una tontería que ambos navegadores conozcan la fecha actual, pero no la aparecerán automáticamente (al menos como marcador de posición).

Al igual que cualquier campo de entrada HTML, el navegador lo dejará vacío a menos que se especifique un valor predeterminado con el valueatributo.

Lamentablemente, HTML5 no proporciona una forma de especificar 'hoy' en el valueatributo (que puedo ver), solo una fecha válida RFC3339 como 2011-09-29.

TL; DR Utilice el YYYY-MM-DDformato de fecha o no se mostrará

El objeto Fecha de JavaScript proporciona suficiente soporte integrado para el formato requerido para evitar hacerlo manualmente:

Agregue esto para el soporte de zona horaria correcta:

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

esto funciona para mi:

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

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

El siguiente código funciona bien:

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

Tenga en cuenta que esto se basa en PHP.

Puede completar el valor predeterminado a través de javascript como se ve aquí: 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);
});

Probablemente pondría un poco de tiempo extra para ver si el mes y la fecha son de un solo dígito y los prefijo con el cero extra ... pero esto debería darle una idea.

EDITAR: verificación agregada para el cero adicional

Siga el formato estándar de Ymd, si está utilizando 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);
});

manifestación

Si no quieres usar jQuery puedes hacer algo como esto

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;

manifestación

En HTML5 como tal, ¿no hay forma de establecer el valor predeterminado del campo de fecha en la fecha de hoy? Como se muestra en otras respuestas, el valor se puede establecer usando JavaScript, y este suele ser el mejor enfoque si desea establecer el valor predeterminado de acuerdo con la fecha actual para el usuario cuando se carga la página.

HTML5 define la valueAsDatepropiedad de los input type=dateelementos y, al usarla, puede establecer el valor inicial directamente desde un objeto creado, por ejemplo, por new Date(). Sin embargo, por ejemplo, IE 10 no conoce esa propiedad. (También carece de soporte genuino input type=date, pero ese es un problema diferente).

Por lo tanto, en la práctica, debe establecer la valuepropiedad, y debe estar en notación conforme a ISO 8601. Hoy en día esto se puede hacer con bastante facilidad, ya que podemos esperar que los navegadores utilizados actualmente admitan el toISOStringmétodo:

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

Si está haciendo algo relacionado con la fecha y la hora en el navegador, desea usar Moment.js :

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

moment()devuelve un objeto que representa la fecha y hora actuales. Luego llama a su .format()método para obtener una representación de cadena de acuerdo con el formato especificado. En este caso,YYYY-MM-DD ,.

Ejemplo completo:

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

use moment.js para resolver este problema en 2 líneas, el tipo de entrada de fecha html5 solo acepta "AAAA-MM-DD" en este formato. Resuelvo mi problema de esta manera.

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

Esta es la forma más sencilla de resolver este problema.

Javascript

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

Jquery

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

Otra opción

Si desea personalizar la fecha, el mes y el año, simplemente haga una suma o un sub como desee 😎 Para el mes se inicia el formulario 0, por eso es necesario sumar 1 con el mes.

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 la función de hoy

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

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

Muy simple, solo use lenguajes del lado del servidor como PHP, ASP, JAVA o incluso puede usar javascript.

Aquí esta la solución

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

si necesita completar la fecha y hora de entrada, puede usar esto:

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

Para NodeJS (Express con plantillas SWIG):

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

Las soluciones más simples parecen pasar por alto que se utilizará la hora UTC, incluidas las altamente votadas. A continuación se muestra una versión simplificada, ES6, no jQuery de un par de respuestas 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

Esto es lo que hice en mi código, lo acabo de probar y funcionó bien, input type = "date" no es compatible para configurar curdate automáticamente, por lo que la forma en que solía superar esta limitación era usar un código PHP como un código simple 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 eso ayude!

Ambas respuestas principales son incorrectas.

Un breve resumen que utiliza JavaScript puro, representa la zona horaria local y no requiere funciones adicionales para definir:

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

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

Esto obtiene la fecha y hora actual en milisegundos (desde época) y aplica el desplazamiento de la zona horaria en milisegundos (minutos * 60k minutos por milisegundo).

Puede establecer la fecha usando element.valueAsDatepero luego tiene una llamada adicional al Date()constructor.

Esto es algo que realmente necesita hacer en el lado del servidor, ya que el formato de hora local de cada usuario difiere, sin mencionar que cada navegador se comporta de manera diferente.

El valor de las entradas de fecha HTML debe estar en este formato: aaaa-mm-dd, de lo contrario no mostrará un valor.

ASP CLÁSICO, O 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

Salida de la fecha de hoy: 2019-02-08

Luego en tu html: <input type="date" value="<% =get_date %>"

PHP

solo usa esto: <input type="date" value="<?= date("Y-m-d"); ?>">

Esto es muy simple aplicando el siguiente código, Usando PHP

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

La función de fecha devolverá la fecha actual, tomando la fecha en 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)

Si está usando ruby, puede usar esto para establecer el valor predeterminado en la fecha y hora de hoy:

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

Una solución simple:

<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 no existe un método predeterminado para establecer el valor en la fecha de hoy, diría que esto debería depender de su aplicación. Si está buscando maximizar la exposición de su audiencia al selector de fechas, use un script del lado del servidor (PHP, ASP, etc.) para establecer el valor predeterminado.

Sin embargo, si es para la consola de administración del CMS, y sabe que el usuario siempre tendrá JS en su sitio o de confianza, entonces puede usar JS de manera segura para completar el valor predeterminado, según jlbruno.

Tuve el mismo problema y lo solucioné con JS simple. La entrada:

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

el JS

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

Importante: el script JS debe estar en la última línea de código, o después de ingresar, porque si coloca este código antes, el script no encontrará su entrada.

No hay un método predeterminado dentro del propio HTML para insertar la fecha de hoy en el campo de entrada. Sin embargo, como cualquier otro campo de entrada, aceptará un valor.

Puede usar PHP para recuperar la fecha de hoy e ingresarla en el campo de valor del elemento de formulario.

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

El campo de valor acepta el formato AAAA-MM-DD como entrada, simplemente creando una variable $date_string en el mismo formato que acepta el valor de entrada y complételo con el año, mes y día recuperados de la fecha de hoy y ¡listo! ¡Tienes una fecha preseleccionada!

Espero que esto ayude :)

Editar:

Si desea tener el campo de entrada anidado dentro de HTML en lugar de PHP, puede hacer lo siguiente.

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

Me doy cuenta de que esta pregunta se hizo hace un tiempo (hace 2 años), pero todavía me llevó un tiempo encontrar una respuesta definitiva en Internet, por lo que sirve para cualquier persona que esté buscando la respuesta siempre que sea posible y espero que sea ayuda a todos enormemente :)

Otra edición:

Casi lo olvido, algo que ha sido un dolor real para mí en el pasado siempre se olvida de establecer la zona horaria predeterminada cada vez que crea un script en PHP que hace uso de la función date ().

La sintaxis es la siguiente date_default_timezone_set(...);. La documentación se puede encontrar aquí en PHP.net y la lista de zonas horarias compatibles para insertar en la función se puede encontrar aquí . Esto siempre fue molesto ya que estoy en Australia, todo se retrasa 10 horas si no lo configuré correctamente, ya que por defecto es UTC + 0000 donde necesito UTC + 1000, así que tenga cuidado :)

Gracias Peter, ahora cambio mi 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>

Y para aquellos que usan 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
%>

Y luego en el cuerpo, tu elemento debería verse así

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

¡Salud!

Incluso después de todo este tiempo, podría ayudar a alguien. Esta es una solución simple de 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>

Una solución similar funciona en Angular sin ninguna biblioteca adicional para convertir el formato de fecha. Para Angular (el código se acorta debido al código de componente común):

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