Suppose we have more than two input boxes on which we want to apply calendar.
A jQuery datepicker can be applied to an input box using:
$(“#calendarField”).datepicker();
Where we have used the id of element (after “#”).
A datepicker can be applied to an element ONLY by using its id i.e., for every element we need to add a calendar, we need to add this line (since ids of elements need to be unique). So for 10 elements, we need to write this line 10 times. Really!!!
Thankfully Not. We can do it in a single line of code. Read on—-
Let’s say we have 5 input boxes on which we want to apply a calendar. We can assign them ids as calendarField1, calendarField2 and so on. Using jQuery’s wildcard we can apply calendar using syntax:
$(“[id^=calendarField”).datepicker();
The above selector fetches all elements whose id starts with “calendarField” and applies a calendar to all of them.
Let’s tweak in :
1. The ^ symbol is a jQuery wild card meaning starts with. It can select all elements whose id or name (using $(“[name^=GetAll]”)) starts with a particular string.
2. $ is another wild card character used to select elements whose id or name ends with a particular string. Example, $(“[id$=end]”) will fetch elements with ids deadend, badend, sadend ….
Was this post helpful to you? If the answer is yes, then spread and let others also know.