Categoría: HTML5 y CSS3

Ejemplo de Date Picker para seleccionar fechas. Es estupendo para usar en app de reservas. También lo es para cuando necesitas saber la edad de algun cliente

Pure CSS3 / HTML5 Date Picker

Código en HTML5:


<label for="reserva">Fecha de reserva</label>
<input type="date" name="reserva" id="reserva">	

Código del Css3:


[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* custom styles */
body {
  padding: 4em;
  background: #e5e5e5;
  font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
label {
  display: block;
}
input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
  width: 190px;
}

Utilizamos cookies para aportar una mejor experiencia al usuario en nuestro sitio web. Si sigues navegando, entendemos que aceptas su uso Más información