Calendario Javascript para usar en formularios

1 1 1 1 1 Rating 5.00 (1 Voto)
Calendario Javascript para usar en formularios
Si tienes la necesidad de agregar un campo en el cual se recoja una fecha y quieres que al presionar salga un calendario para que el cliente o la persona que este llenando el formulario seleccione la fecha de una manera simple, esta es la solución.
 
Hace poco tuve la necesidad para un trabajo de colocar una opción en un formulario donde un cliente selecciona la edad de nacimiento, después de buscar mucho encontré este calendario hecho en Javascript con muchas funcionalidades y fácil de aprender a usar.

Paso 1: Incluir en la cabecera, nuestro archivo java script.

Calendario JavaScript

Codigo:

<link rel="stylesheet" type="text/css" href="/src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="/src/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="/src/css/steel/steel.css" />
<script type="text/javascript" src="/src/js/jscal2.js"></script>
<script type="text/javascript" src="/src/js/lang/es.js"></script>


Paso 2: Le aginamos al formulario el input correspondiente al campo que llama al calendario en Javascript.

Calendario JavaScript

Codigo:

<label for="f_rangeStart">Campo Fecha:</label> </td>
<input size="15" id="f_rangeStart" />
<button id="f_rangeStart_trigger">...</button>
<button id="f_clearRangeStart" onclick="clearRangeStart()">Limpiar</button>
<script type="text/javascript">
RANGE_CAL_1 = new Calendar({
inputField: "f_rangeStart",
dateFormat: "%Y/%m/%d",
trigger: "f_rangeStart_trigger",
bottomBar: false,
onSelect: function() {
var date = Calendar.intToDate(this.selection.get());
LEFT_CAL.args.min = date;
LEFT_CAL.redraw();
this.hide();
}
 });
function clearRangeStart() {
document.getElementById("f_rangeStart").value = "";
LEFT_CAL.args.min = null;
LEFT_CAL.redraw();
};
</script>

En este código podemos seleccionar el formato de la fecha en la opción:

dateFormat: "%Y/%m/%d",
 

Pagina de ejemplo completa.

Pagina de ejemplo simple.

Archivos necesarios a subir.
 
funciones para un calendario java / calendar en js / código pada desplegar un calendario en java / calendario javascript formulario / formulario de Calendario / objeto calendario js / como ingresar la opcion de calendario en html /

Más articulos

Escribir un comentario

Facebook Mundonets Twitter Mundonets