none
JQuery Datepicker mvc4 RRS feed

  • Pregunta

  • Estimados...

    Estoy tratando de implementar un datepicker en mvc4 pero al momento de la navegación no carga el calendario.

    En el Layout tengo estas 3 líneas:

            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    En la vista tengo un script

    <script>
        $(document).ready(function () {

            alert('paso por ready');

            $("#FECHA_VISITA").datepicker({ dateFormat: 'dd/mm/yy' });
        });
    </script>

    Este script si muetra el mensaje del alert cuando se carga la vista.

    Y el campo se llama:

                        <div class="editor-label">
                            FECHA VISITA
                        </div>
                        <div class="display-field">
                            @Html.TextBoxFor(model => model.FECHA_VISITA)
                            @Html.ValidationMessageFor(model => model.FECHA_VISITA)
                        </div>

    Saludos cordiales....

    martes, 16 de diciembre de 2014 20:27

Todas las respuestas

  • hola

    desde el action en el controler como asignas la propeidad FECHA_VISTA del model ?

    usas algo como ser

    public class XXController : Controller {
    
       public ActionResult Index(){
    
           XXModel model = new XXModel(){
               FECHA_VISTA = DateTime.Now;
          };
    
          retunr View(model);
    
       }
    
    }

    debes asignar al model la fecha para poder verla en la view

    tambien inspecciona el html con del developer tool del browser al cual accedes con F12, y ver que id le define al textbox

    prueba quitando el _ del nombre de la propiedad

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 16 de diciembre de 2014 21:21
  • Asignándole FECHA_VISITA = Datetime.Now si se visualiza la fecha en la caja de texto.

    Le verifiqué el código que devuelve la página una vez que se ejecuta y es el siguiente:

    <input class="text-box single-line" data-val="true" data-val-date="The field FECHA_VISITA must be a date." id="FECHA_VISITA" name="FECHA_VISITA" type="datetime" value="16/12/2014 16:40:32" />


    La acción en la que estoy tratando de usar el calendario es en el CREATE para poder registrar datos.

    Saludos cordiales..


    martes, 16 de diciembre de 2014 21:41
  • Hola Dennis y sólo  por curiosidad, porque no haces uso del control Date de HTML5? Considero que mientras tengas a mano controles "nativos" de la tecnología sobre la que construyes tus páginas (en este caso html) no me parece que debas echar mano a controles extra a menos que si tengas un sustento mayor.
    martes, 16 de diciembre de 2014 21:45
  • >>Asignándole FECHA_VISITA = Datetime.Now si se visualiza la fecha en la caja de texto.

    no entiendo entonces cual era el problema? solo hacia falta asignar la propiedad al modelo

    o apuntas a que sin asignar esa fecha el desplegable del calendario para que el usuario seleccione una fecha no se mostraba ?

    Nota: si esa fecha es opcional recuerda definirla como DateTime nulable o sea "DateTime?" en la clase del model, asi sino hay nada valida que sea requiereda

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 16 de diciembre de 2014 22:12
  • Al momento de ingresar la fecha quisiera que se despliegue el calendario para poder escoger una fecha.... Pero el calendario no aparece cuando se da clic sobre la caja de texto....

    Saludos cordiales...

    martes, 16 de diciembre de 2014 22:25
  • >>Pero el calendario no aparece cuando se da clic sobre la caja de texto

     si aparece cuando defines una fecha en el model ?

    validaste sino se produce un error en javascript? podrias verlo desde ls consola del Developer Tool del browser, al cual accedes con F12

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 16 de diciembre de 2014 22:39
  • Leandro, creo que Dennis intentaba responderme el porque no usa el control DATE de HTML5, veo que olvido citar el comentario para evitar confusiones.
    martes, 16 de diciembre de 2014 22:41
  • Estimado Leandro, deseo hacer algo como esto...

    Cuando doy clic en la caja de texto aparece el calendario para escoger una fecha... 

    Saludos cordiales...

    miércoles, 17 de diciembre de 2014 18:09
  • ¿En la consola del navegador te tira algún error?


    Miguel Salazar
    -> www.miguelsalazar.mx

    • Editado Mig Salazar miércoles, 17 de diciembre de 2014 18:33
    miércoles, 17 de diciembre de 2014 18:33
  • No ningún error...

    Saludos cordiales...

    miércoles, 17 de diciembre de 2014 18:46
  • Es raro porque no hay señales de nada.

    Lo último que se me ocurre es que si se esté mostrando pero alguna interferencia con el estilo lo oculta.

    ¿Que navegador uilizas?

    Y solo para descartar, intenta haciendo la prueba con un input con puro html:

    <input type="text" id="FECHA_VISITA" />
    <script>
    $(document).ready(function() {
       $('#FECHA_VISITA').datepicker();
    });
    </script>
    y coméntanos que sucede.

    Miguel Salazar
    -> www.miguelsalazar.mx

    • Editado Mig Salazar miércoles, 17 de diciembre de 2014 21:48
    miércoles, 17 de diciembre de 2014 21:47
  • Estimado Miguel, de la manera que tu me recomiendas si funciona.... si se despliega el calendario... pero en mi AppMVC no se muestra...

    Y en efecto yo estoy usando un template para todo lo que es la aplicación...

    Saludos cordiales...

    miércoles, 17 de diciembre de 2014 22:14
  • Muy bien... pienso que el error está por el tipo de dato de FECHA_VISITA, en el html que devuelve el servidor, el html que posteaste, el input aparece de esta manera:

    <input class="text-box single-line" data-val="true" data-val-date="The field FECHA_VISITA must be a date." id="FECHA_VISITA" name="FECHA_VISITA" type="datetime" value="16/12/2014 16:40:32" />

    Si te fijas el tipo es "datetime". Creo que esto jquery no lo reconoce. Podrías probar, cambiando el tipo de dato de esa variable a tipo String, y luego convertirla a datetime mas adelante en el controlador para introducirla de manera correcta al modelo.

    Por cierto, ¿Que navegador estás utilizando para hacer las pruebas? En chrome hay ciertas variantes cuando type="datetime"


    Miguel Salazar
    -> www.miguelsalazar.mx

    • Editado Mig Salazar miércoles, 17 de diciembre de 2014 22:37
    miércoles, 17 de diciembre de 2014 22:36