entre Desarrolladores

Question

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

¿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.
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.
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...

Answer 1

3 Respuestas

Answer 2 · 2014-11-17T05:05:32+0000

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!

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.
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!

Answer 3 · 2014-11-17T05:25:44+0000

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.

pabeni · Answer 4 · 2014-11-19T03:21:42+0000

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.

respondido por juansolo (1.840 puntos) Nov 19, 2014

0voto

pabeni comentado Nov 19, 2014

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

comentado por pabeni (1.090 puntos) Nov 19, 2014

0voto

pabeni comentado Nov 21, 2014

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>

comentado por pabeni (1.090 puntos) Nov 21, 2014

editado por pabeni Nov 21, 2014

Pregunta

Como cargar varias fechas en un input type=date ?

carlossevi comentado Nov 17, 2014

pabeni comentado Nov 17, 2014

pabeni comentado Nov 17, 2014

Por favor, accede o regístrate para añadir un comentario.

3 Respuestas

carlossevi comentado Nov 17, 2014

Leonardo-Tadei comentado Nov 17, 2014

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

pabeni comentado Nov 19, 2014

pabeni comentado Nov 21, 2014

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

mchojrin respondió Dic 9

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta