 |
  
The DatePicker lets users easily select valid dates from a dropdown calendar.
No need to worry about date formats, by picking dates it's always correct.
Screenshots:
Starts as normal input field.
|
|
Title attribute with human-readable date.
|
Can be opened to select a date - and later be closed again.
|
|
Customized date-picker with colors and css classes.
|
Skins:
|
Features:
-
Dates can be specified in many ways:
- Type into the date field.
- Pick one in the calendar.
-
Use your mouse wheel or cursor up/down keys to change the current date:
- In/over the year input field
-
In/over the date field. If it does not have focus, the day changes. If it has focus, it matters where
the cursor currently stands. If it's for example in the month part, it changes the month.
Note: mouse wheel is an ie-only feature.
-
Use API functions:
- yourPicker.setDateByChunks(year, month, day)
- yourPicker.setDateByIso(isoDate)
- yourPicker.setDateByObject(jsDateObject)
Read the API-Doc.
- Validation of typed in dates - eg 2001/02/29 won't be accepted. Knows leap years.
- Works with pre-1970 dates (no unix-style limitation). Only the weekdays are not known for those dates.
- Allowed input formats are: American mm/dd/yyyy (12/31/2003), European dd.mm.yyyy (31.12.2003) and ISO yyyy-mm-dd (2003-12-31).
- Display format can be one of american, european or iso (default).
- Language support (currently en/de/fr, create your own).
- Supports Skins. In addition: the style and colors can be highly customized by color names and/or css classes.
- Compatibility: Old and non-js browsers will still have the input field, but no picker. They can still type in dates. See example 3 and the convertField() method.
- Can be directly used as Bs_Form field. See the Bs_Form package.
- Define the allowed date range (see example 5).
- Lots of settings and API methods.
Example Code:
myDatePicker = new Bs_DatePicker('myDatePicker');
myDatePicker.fieldName = 'datePickerField';
myDatePicker.setDateByIso('2003-12-31');
myDatePicker.drawInto('myDatePickerDiv');
Examples:
|
|
|
MS Internet Explorer
MS IE on Mac
