entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Como cargar varias fechas en un input type=date ?

Hola comunidad, quería que me ayudaseis con un problema que tengo, dicho problema consiste en que no consigo cargar "varias" fechas(las cuales las obtengo de una base de datos)en un campo date, para que así a la hora de desplegar el calendario me salgan todas las fechas señaladas.
He conseguido con una única fecha cargándolo en el atributo value, pero el problema me surge con mas de una fecha. He intentado crear un array de todas las fechas para posteriormente cargarlo en el input date pero no lo consigo ya que para poder recorrer el array lo hago con un for o foreach y no me interesa crear un input por cada ciclo. No se si me entendéis ;)

Espero vuestra respuesta, un saludo!!!

0voto

carlossevi comentado

¿Estás utilizando el input por defecto de HTML5 o alguno personalizado o de algún plugin/framework? Será cuestión de ver en la documentación del input si puede personlizarse.

0voto

pabeni comentado

Hola que tal carlossevi?

Estoy utilizando el input type date que trae por defecto HTML5, no hago uso de ningún plugin de ningún tipo como podria ser datapiker de jQuery...

Editado: movido a comentario porque no es una respuesta a la pregunta.

0voto

pabeni comentado

Hola que tal carlossevi?

Estoy utilizando el input type date que trae por defecto HTML5, no hago uso de ningún plugin de ningún tipo como podria ser datapiker de jQuery...

3 Respuestas

2votos

Leonardo-Tadei Puntos227320

Hola Pabeni,

el INPUT de tipo DATE de HTML5 soporta sola una fecha por default.

Si lo que querés es proponer fechas predeterminadas, podés combinar el INPUT con un DATALIST de esta manera:

<!DOCTYPE html>
<html>
<head>
    <title>Fechas HTML5</title>
<head>
<body>
<form action="post">
    <input list="fechas" type="date" name"fecha" id="fecha">
    <datalist id="fechas">
      <option value="2014-11-01">
      <option value="2014-11-09">
      <option value="2014-11-14">
      <option value="2014-11-20">
      <option value="2014-11-22">
      <option value="2014-11-30">
    </datalist> 
</form>
</body>
</html>

La contra que tiene esto es que no todos los navegadores están soportando todavía los INPUT de tipo DATE. En los que no te funcione, lo que verás será una lista de fechas como si fuera una caja desplegable.

Para una solución con mayor soporte, tenés que apuntar a lo que sugería @carlossevi, que es usar alguna biblioteca JavaScript para generar los calendarios y poder adaptarla mejor a tus nececidades.

Saludos!

0voto

carlossevi comentado

Muy buena la solución del datalist. Me gusta mucho más tu respuesta, pero es un lío la diferente implementación que hace cada navegador del input. He probado con Firefox y Chrome y no se parece en nada por lo que sigo prefiriendo tener el control desde JS y CSS.

0voto

Leonardo-Tadei comentado

Tal cual Carlos. Sin embargo, el datalist tiene un soporte mucho más extendido que el INPUT de tipo DATE.

La implementación esta funciona también bien en FF, que todavía no soporta datalist (pero la versión móbil sí (?) ), salvo que el aspecto es diferente y se ve como una caja de selección "abierta" en el sentido de que se puede seleccionar una fecha o poner una neuva.

En cualqueir caso, siempre hace falta una validación del lado del servidor, con lo que la cuestión pasa más por el lado de homogenizar la interfaz entre diferentes navegadores

Como decía más arriba, concuerdo contigo en que para tener un mejor control, hay que usar JavaScript y CSS. Esto dependerá de las necesidades puntales de @pabeni y de lo que considere como "suficientemente bueno" en la relación costo/beneficio.

Saludos cordiales!

1voto

carlossevi Puntos63580

Hola pabeni, el input estándar de HTML5 no acepta restricciones tan complejas como las que pides. Como mucho existen los atributos max y min que marcarían el comienzo y final del rango. Te dejo el enlace de la especificación: http://www.w3schools.com/html/html_form_input_types.asp

Si tienes mucho interés en controlar esto quizá deberías optar por un input personalizado sobre el que tengas más control.

1voto

juansolo Puntos1840

Una vez tuve un problema parecido al tuyo y lo solucione usando un input de tipo hidden donde almacene el array con las fechas y luego use un plugin JQuery que mostraba un DatePicker que inicializaba con dicho array.

El problema es que no me acuerdo del nombre del plugin. Creo que era este.

0voto

pabeni comentado

Hola otra vez,

Tras la respuesta de Leonardo-Tadei me quedo claro que no se pueden dar varias entradas al input type date que ofrece HTML5 por defecto, lo cual me llevo a buscar otra alternativa, dicha alternativa consistía en hacer uso de un pugin js externo(datepicker) y por tampoco obtengo el resultado que espero, los pasos que realizo son:

1.Creo un consulta donde me traigo todas las fechas que quiero que queden marcadas en el datepicker.
2.Tras la consulta voy almacenando las fechas en un array.
3.luego intento introducir las fechas en el datepicker(aquí es donde no consigo hacerlo funcionar), ya que si consigo crear un text para cada fecha pero no todas en un text marcadas...

Ojala me pudierais ayudar en encaminar la solución.

Saludos!!!

0voto

pabeni comentado

Aquí pongo el código:

<?php

try{
    //Creamos la conexión con la BD
    $conexion = //Aquí iría la conexión con la BD       
    //Indicamos que haremos uso de la condificacion utf8
    $conexion->exec("SET NAMES 'utf8'");
    //Despues creamos la consulta para actualizar los datos en la BD
    $consulta = "SELECT fecha FROM  altaFichas WHERE usuario='PascualMarti';";
    $consulta = $conexion->prepare($consulta);

    $fe = "";
    if($consulta->execute()){
        while($fila = $consulta->fetch()){
            $fecha  = $fila['fecha'];
            $ArrayFecha = explode('-', $fecha);
            $fecha = $ArrayFecha[0] ."/".$ArrayFecha[1] ."/".$ArrayFecha[2];
            $fe .= $fecha.",";
        }  
        echo "<input type='hidden' name='".$fe."' id='fec'>";

    }else{
        $mensage = "Error, al intentar mostrar los datos.";
    }
    //Cerramos la conexión
    $conexion = null;

}catch(Exception $e){
    echo "Error en la conexión";
}

?>

Código HTML

<html>
    <head>
        <title>prueba cargar fechas en calendario</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css">
        <style>.input-group{width:200px;}</style>
    </head>  
    <body>
        <div class="input-group date">
          <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>
        <script>
            $('.input-group.date').datepicker({
                $('.input-group.date').datepicker('setDate', $('#fec').attr('name'));
            });
        </script>
    </body>
</html>

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta