Popular channels

Datepicker jquery, jquery ui

hola amigos una disculpa por atrazarme en el tutorial y sin mas seguiremos, hoy veremos en nuestro formulario como agregar un datepicker. Recuerda que para seguir la serie debes leerte todos los post anteriores.

Evaluar correo jquery


Datepicker


El Datepicker es aquel calendario que se visualiza en algunas website, ya se para ingresar fecha de nacimieto,agendar una cita u otras funciones.

como por ejemplo l siguiente web que usa un datepicker para agendr citas en linea: Ginecologos en cancun

una imagen también



en la version HTML5 trae incorporado el input de date que muestra un Datepicker, el problema es que no todos los navegadores lo incorporan y por aquella razon trae consigo problemas.

para todo mal, su medicina por eso contamos con Jquery UI me atrevo a decir que jquery iu es una parte de jquery como un complemento mas, etc

Bien dicho esto partimos del caso de que tenemos un formulario. que valida todos los campos, ademas valida el correo de que contenga la sintaxis correcta ([email protected])

En dicho formulario tenemos un campo para ingresar la fecha de nacimieto, pues este campo sera el elegido para usar jquery con su complemento jquery UI y agregar el Datepicker.



PASO 1: dercargaremos Jquery UI desde su web oficial http://jqueryui.com/ (podras notar que posee muchos temas y complementos y se puede elegir cuales quieres y cuales no)

PASO 2: Recordar que en los primeros capitulos de la serie creamos una carpeta JS que seria para los script, pues copiamos los archivos descargados en la carpeta js. (y para no repernos la cabeza copiaremos tanto los css como los js de jquery UI)

PASO 3: vincularemos las librerias necesarias de jquery ui en en head



PASO 4: ahora agregaremos los parametros necesarios para el datepicker (estos parametros y funcionalidades lo explica la doc de la pagina de jquery ui)

Lo explicare brevemete (de nuevo toda la documentacion en la web oficial)

Por defecto el calendario viene en ingles por lo cual el primer proseso es instanciar y cambiar al español el idioma de los nombres de los dias, meses, formato de fecha, boton siguiente y atraz, boton cerrar etc.



En el siguiente apartado creamos el rango de años, permtir cambiar de año y de mes y el formato de fecha etc. dentro de una variable de opciones que pasaremos a nuestro input.



y por ultimo llamamos mediante su id al input de fecha y cargamos las opciones




el codigo completo: P



Ahora ya tenemos nuestro formulario casi terminado, por el momento vemos que valida si la fecha esta vacia o no y un lindo calendario para escoger comodamente la fecha





DEMO --> DEMO

DESCARGAR EJEMPLO

SI ALGUNO TIENE UN WEBSITE EN LINEA Y QUIERE MEJORAR SU SEO QUE ME MANDE UN MAIL

Regalale una visita a esta pagina ayudame a seguir escribiendo y visitala ->> Blog Inmobiliairia Sommer cancun

sigueme por facebook twitter google+
0
0
0
0No comments yet