We often needs to use multiple JQuery date picker in one HTML or JSP page, classical example is online flight booking for return trips, where you need to pick departure date and arrival date from two separate datepickers. While designing HTML forms either statically or dynamically using JSP, you may want to associate date picker with multiple input text field, paragraph or any other HTML elements. By using JQuery UI and some help from CSS ID and class selector, we can easily use multiple datepicker in one HTML page. All you need to do is, declare a CSS class say .datepicker and apply that class to all HTML elements which needs date picker, for example we have associated date picker with 4 input text fields, which has .datepicker class. By using a class, it becomes extremely easy to select all those elmeent using JQuery class selector, and once you got all those element, you can just call datepicker() methos. This method does all the hard-work and associate a date picker object with selected items, that's it. Now you are ready to use multiple date picker in your HTML or JSP page, let's see the complete code. By the way if you are just starting with jQuery than I highly recommend Head First Query, it�s easy to read and contain some non trivial example to learn jQuery quickly.
No comments:
Post a Comment