JQuery Datepicker mvc4

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

Leandro, creo que Dennis intentaba responderme el porque no usa el control DATE de HTML5, veo que olvido citar el comentario para evitar confusiones.

Answer 8

Estimado Leandro, deseo hacer algo como esto...

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

Saludos cordiales...

Answer 9

¿En la consola del navegador te tira algún error?

---

Miguel Salazar
-> www.miguelsalazar.mx

Answer 10

No ningún error...

Saludos cordiales...

Answer 11

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

Answer 12

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

Answer 13

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