• Choose a category
• All
• Classic-Fiction

By Root 1180 0

text box receives focus), 'button' (a button is added next to the text box, which users can click to open the calendar), or 'both' (which allows for both options). To use an icon for the button, we’ve specified a buttonImage. We also set buttonImageOnly to true; this means that only the image will be displayed, rather than a standard form button.

Next up, we’ve set the numberOfMonths to 2—this means the user will see two months worth of days at the same time. You can even specify an array instead of an integer; for example, [3, 3] will show a 3x3 grid of months!

The maxDate and minDate options let you set the range within which the user can select a date. You can specify a JavaScript date object, or you can use a string to dictate relative dates. The latter option is usually easier, and that’s what we’ve done here. We’ve set the maxDate as 0—which means today’s date. The minDate we’ve set as -1m -1w so the user can only select a date that is up to one month and one week in the past. You can plus or minus as much time as you need: y for year, m for month, w for week, and d for day.

Warning: Date Validation

You may have set a maximum date for the date picker, but users are still able to select a date outside of that range—they can enter it into the text box manually. If you must ensure that dates are within a given range, you need to be performing validation on the server side! The date ranges you specify in the date picker options are to assist your users in picking valid options; that way, they avoid submitting a form that contains frustrating errors.

Date Picker Utilities

The jQuery UI library also provides a few date picker utilities for globally configuring the date pickers, as well as making it easy to play with dates.

The $.datepicker.setDefaults method accepts an object made up of date picker settings. Any settings that you specify will be applied to all date pickers on the page (unless you manually override the defaults). For example, if you want every date picker to show two months at a time:

$.datepicker.setDefaults({

numberOfMonths: 2

});

The remaining utility functions are for manipulating or assisting with dates and date formats. The $.datepicker.iso8601Week function accepts a date and returns the week of the year it’s in, from 1 to 53. The $.datepicker.parseDate function extracts a date from a given string; you need to pass it a string and a date format (for example, "mm-dd-yy"), and you’ll receive a JavaScript date object back. Finally, the $.datepicker.formatDate does the opposite. It will format a date object based according to the format you specify—which is great for displaying dates on screen.

Sliders

Our client wants his visitors to be able to find the celebrities they’re looking for quickly and easily. He also recognizes that many of his clients will be looking for celebrities whose location information falls in a particular price range, so he wants us to add a price range filter to the site. This is a perfect opportunity to introduce another great jQuery UI component: slider!

We’ll start with a basic form, consisting of two select boxes: one for the maximum price, and one for the minimum price. Then we’ll call on jQuery UI to add a fancy slider to control the values of those boxes. The end result is illustrated in Figure 7.7.

Figure 7.7. A jQuery UI slider

Let’s have a look at the basic markup:

chapter_07/13_sliders/index.html (excerpt)

Now for a look at the code. When the page loads, we first grab the current maximum and minimum values in the select boxes. Then we initiate our slider by