html5 - type - insertar calendario en formulario html
HTML5 Tipo de entrada Fecha: ¿Valor predeterminado para hoy? (25)
Los nuevos tipos de entrada HTML5 son geniales. El nuevo selector de fechas integrado 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 manera de establecer el valor predeterminado del campo de fecha en la fecha de hoy? Con Opera, puedo elegir "Hoy" en el selector de fecha, y tan pronto como hago clic en cualquiera de los botones de paso en Chrome, aumenta / disminuye 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 estén al tanto de la fecha actual, pero no la incorporen automáticamente (al menos como marcador de posición).
Para NodeJS (Express con plantillas SWIG):
<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />
Aquí hay una manera fácil de hacer esto con javascript.
var date = new Date();
var datestring = (''0000'' + date.getFullYear()).slice(-4) + ''-'' + (''00'' + (date.getMonth() + 1)).slice(-2) + ''-'' + (''00'' + date.getDate()).slice(-2) + ''T''+ (''00'' + date.getHours()).slice(-2) + '':''+ (''00'' + date.getMinutes()).slice(-2) +''Z'';
document.getElementById(''MyDateTimeInputElement'').value = datestring;
Como no hay 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 fecha, 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 o su sitio será de confianza, entonces puede usar JS de forma segura para completar el valor predeterminado, según jlbruno.
El objeto Fecha de JavaScript proporciona suficiente soporte integrado para el formato requerido para evitar hacerlo manualmente:
Agregue esto para el soporte correcto de la zona horaria:
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();
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.
En HTML5 como tal, ¿no hay manera de establecer el valor predeterminado del campo de fecha en la fecha de hoy? Como se muestra en otras respuestas, el valor se puede configurar mediante JavaScript, y este suele ser el mejor enfoque si desea establecer el valor predeterminado según la fecha actual del usuario cuando se carga la página.
HTML5 define la propiedad valueAsDate para input type=date elementos de input type=date , y al usarla, puede establecer el valor inicial directamente desde un objeto creado, por ejemplo, por una new Date() . Sin embargo, por ejemplo, IE 10 no conoce esa propiedad. (También carece de soporte genuino para input type=date , pero eso es un problema diferente).
Por lo tanto, en la práctica, debe establecer la propiedad de value 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 toISOString compatibles con el método toISOString :
<input type=date id=e>
<script>
document.getElementById(''e'').value = new Date().toISOString().substring(0, 10);
</script>
Esto es lo que hice en mi código, lo acabo de probar y funcionó bien, el tipo de entrada = "fecha" no admite establecer la fecha de caducidad automáticamente, por lo que la forma en que utilicé para superar esta limitación fue usar el código PHP, un código sencillo como .
<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!
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>
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);
});
demo
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;
demo
Muy simple, solo use lenguajes del lado del servidor como PHP, ASP, JAVA o incluso puede usar javascript.
Aquí está 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>
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 obtener 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 YYYY-MM-DD como entrada, simplemente creando una variable $date_string en el mismo formato que el valor de entrada y rellénelo con el año, el mes y el día recogidos desde la fecha de hoy y ¡voilá! 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 atrás (hace 2 años) pero aún así me tomó un tiempo encontrar una respuesta definitiva en Internet, así que esto sirve para cualquier persona que esté buscando la respuesta en cualquier momento y espero ayuda a todos en gran medida :)
Otra edición:
Casi se me olvida, algo que ha sido un dolor real para mí en el pasado siempre se olvida de establecer la zona horaria predeterminada cada vez que se hace un script en PHP que hace uso de la función date ().
La sintaxis es date_default_timezone_set(...); . La documentación se puede encontrar aquí en PHP.net y la lista de zonas horarias admitidas 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 ten cuidado :)
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 dedicaría un poco más de tiempo para ver si el mes y la fecha son dígitos únicos y los prefijo con el cero adicional ... pero esto debería darle una idea.
EDITAR: Cheque agregado para el cero extra
Si está haciendo algo relacionado con la fecha y la hora en el navegador, desea utilizar Moment.js :
moment().format(''YYYY-MM-DD'');
moment() devuelve un objeto que representa la fecha y hora actuales. Luego llama a su método .format() 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>
Si está usando ruby, puede usar esto para establecer el valor predeterminado a la fecha y hora de hoy:
<input type="datetime-local" name="time" value="<%= Time.now.strftime(''%Y-%m-%dT%H:%M'') %>" />
Si necesita completar el tiempo de entrada, puede usar esto:
<input type="datetime-local" name="datetime"
value="<?php echo date(''Y-m-d'').''T''.date(''H:i''); ?>" />
Siga el formato estándar de Ymd, si está utilizando PHP
<input type="date" value="<?php echo date("Y-m-d"); ?>">
Tuve el mismo problema y lo arreglé 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.
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>
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 algo como esto.
<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />
¡Aclamaciones!
esto funciona para mi
document.getElementById(''datePicker'').valueAsDate = new Date();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
por Javascript:
var today = new Date();
document.getElementById("theDate").value = today.getFullYear() + ''-'' + (''0'' + (today.getMonth() + 1)).slice(-2) + ''-'' + (''0'' + today.getDate()).slice(-2);
use moment.js para resolver este problema en 2 líneas, el tipo de entrada de fecha html5 solo acepta "YYYY-MM-DD" con 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.
Al igual que en cualquier campo de entrada HTML, el navegador lo dejará vacío a menos que se especifique un valor predeterminado con el atributo de value .
Lamentablemente, HTML5 no proporciona una forma de especificar "hoy" en el atributo de value (que puedo ver), solo una fecha válida RFC3339 como 2011-09-29 . Lo siento, eso no ayuda mucho!
<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" />
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)