0

Estoy usando Materialize CSS y más específicamente quiero usar el Datepicker para un formulario, trato de integrarlo con Django pero no se me muestra de la forma correcta, por lo que pasé a probarlo de la forma rudimentaria.
Este es el código HTML y tengo las librerías JS y CSS vinculadas en mi HTML.

<form class="col s12">
  <div class="row">
    <div class="input-field col s12">
        <label for="birthdate" class="">Birthdate</label>
       <input id="birthdate" type="date" class="datepicker">
    </div>
</form>

Y el JS está así (tambíen cargado al HTML)

 $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
    format: 'yyyy-mm-dd'
  });

Pero se me muestra así. introducir la descripción de la imagen aquí

4
  • Hola, el problema es el ancho o el formato? Commented el 22 abr. 2017 a las 2:21
  • Parece un problema de conflictos de estilos. Se puede deducir por el aspecto del input, hay uno sobrepuesto. ¿Sucede solo con el datepicker o también con otros controles?
    – gugadev
    Commented el 22 abr. 2017 a las 12:47
  • @AlfredoCebrián Resulta que el Script JS lo ponía un un archivo aparte y no lo reconocía. La solución fue poner el script dentro del HTML (al final del todo) y ya funcionó (Y).
    – Reynald0
    Commented el 23 abr. 2017 a las 19:28
  • @GustavoGarcía La solución fue poner el script dentro del HTML (al final del todo) y ya funcionó (Y).
    – Reynald0
    Commented el 23 abr. 2017 a las 19:28

4 respuestas 4

2

La solución fue poner el script dentro del HTML (al final del todo) y ya funcionó (Y).

Al parecer al llamarlo desde un archivo externo (archiv.js) no lo reconoce, por eso debe estar dentro del HTML que está usando el DatePicker.

0

En realidad, el problema está en que no diste tiempo al DOM para que se cargue entero antes de tener disponible tu archivo javascript.

Básicamente, tu código javascript se estaba ejecutando antes que se carguen todos los elementos de la página. Entonces javascript al no encontrar el elemento .datepicker no hizo nada. Y la página al terminar de cargar todos los elementos, no avisa a javascript.

La solución tuya, de colocar javascript al final de la página, funciona, porque para que llegue a cargar esa parte, tiene que haber cargado todo lo anterior.

Sin embargo, una mejor solución es separar javascript en un archivo diferente, y cuando la página esté cargada, recién ejecutar el código javascript. JQuery provee de $(document).ready() para avisarle a javascript que todos los elementos de la página ya se cargaron. En tu caso por ejemplo:

$(document).ready(function() {
    $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year
        format: 'yyyy-mm-dd'
    });
});
6
  • Gracias por contestar, así lo tenía en un archivo externo y no andaba.
    – Reynald0
    Commented el 27 abr. 2017 a las 19:14
  • Pero en el archivo externo, ¿hiciste que el código se ejecute recién cuando la página esté totalmente cargada? O sea, dentro de $(document).ready(function() { /* Todo tu código */ });
    – Francute
    Commented el 28 abr. 2017 a las 0:16
  • Claro, aquí lo dejo. $(document).ready(function(){ $('.button-collapse').sideNav(); $('select').material_select(); $(".dropdown-button").dropdown({ belowOrigin: true, // Displays dropdown below the button hover: true, // Activate on hover }); });
    – Reynald0
    Commented el 29 abr. 2017 a las 3:09
  • Dentro de ese código que pasaste nunca mencionaste al .datepicker. Pero suponiendo que sí lo probaste, estabas seguro que se estaba relacionando bien tu archivo js con tu html? Por ejemplo, escribiendo dentro del mismo un "alert("Hola mundo");"??? No es que esté mal en sí JS dentro de un HTML, sino, que realizando un archivo JS, con código como ese, te permitiría evitar duplicar mucho código (Entre más beneficios).
    – Francute
    Commented el 30 abr. 2017 a las 16:15
  • Si, entiendo que es la mejor manera, pero puede probarlo por su propia cuenta. Intenté haciendo un simple alert y ni eso me ejecutaba.
    – Reynald0
    Commented el 1 may. 2017 a las 1:30
0

Debes cambiar tipo de dato del input de date a text. Por alguna razón en Firefox no reconoce el type="date".

0
-1

Escribe esta linea en el fichero JavaScript, para que actualice el materialize:

Materialize.updateTextFields();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.