A Date and Time picker jQueryMobile plugin for Mobile Apps
DateBox is a jQueryMobile plugin that aims to make user interaction with dates and times simple and intuitive. It is a collaborative work, with a full range of features allowing easy implementation, and painless extensibility.
jQMDateBox – Main Documentation//
Description
DateBox is a jQueryMobile plugin that aims to make user interaction with dates and times simple and intuitive. It is a colloborative work, with a full range of features allowing easy implementation, and painless extensibility.
Conventions
These demos use a good bit of pseduo-code – remember to look at the page source to get the whole story. Also, a few options are locked on for all of these demos, mainly the control displays “inline” – that is, as part of the page rather than a popup (the default behavior). It also has the “new” style forced on for most of the demos (somewhere under display options I’ll show the old method).
I’ve also specifically turned jQM’s Ajax Navigation OFF – this is not because DateBox has any problems working with correctly when it’s enabled, it was purely to make sure that bookmarks to specific parts of this documentation are easy to follow
Navigation
A the top of each page, you can naviagte through this like a giant how-to, or jump to the Table of Contents
Features
DateBox has a number of kinda cool features, among them:
- Multiple display and entry modes for dates, times, and durations
- Android-like style (entry box with +/- buttons)
- Full Calendar display
- Flip (IOS) style (draggabled stacked list)
- Slide style (draggable horizontal list)
- Multiple control display modes
- Popup (default)
- Inline with other form controls
- Slide down from original input element
- Fully localized – 40+ languages pre-configured
- Fully custiomizable output formats
- Supports multiple methods of limiting valid date entry
- Supports entry, exit, creation, selection, change, and more programming hooks
jQMDateBox – Localizing Datebox//
Customising a Language
The simplest way to customise a language is to edit or create a file with all of the needed strings for datebox. The file looks something like this:
jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {
'en': {
setDateButtonLabel: "Set Date",
setTimeButtonLabel: "Set Time",
setDurationButtonLabel: "Set Duration",
calTodayButtonLabel: "Jump to Today",
titleDateDialogLabel: "Set Date",
titleTimeDialogLabel: "Set Time",
daysOfWeek: [
"Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"
],
daysOfWeekShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
monthsOfYear: [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
],
monthsOfYearShort: [
"Jan", "Feb", "Mar",
"Apr", "May", "Jun",
"Jul", "Aug", "Sep",
"Oct", "Nov", "Dec"
],
durationLabel: ["Days", "Hours", "Minutes", "Seconds"],
durationDays: ["Day", "Days"],
tooltip: "Open Date Picker",
nextMonth: "Next Month",
prevMonth: "Previous Month",
timeFormat: 12,
headerFormat: "%A, %B %-d, %Y",
dateFieldOrder: ["m", "d", "y"],
timeFieldOrder: ["h", "i", "a"],
slideFieldOrder: ["y", "m", "d"],
dateFormat: "%m/%d/%Y",
useArabicIndic: false,
isRTL: false,
calStartDay: 0,
clearButton: "clear"
durationOrder: ["d", "h", "i", "s"],
meridiem: ["AM", "PM"],
timeOutput: "%k:%M", // 12hr: "%l:%M %p", 24hr: "%k:%M",
durationFormat: "%Dd %DA, %Dl:%DM:%DS",
calDateListLabel: "Other Dates",
calHeaderFormat: "%B %Y",
calTomorrowButtonLabel: "Jump to Tomorrow"
}
});
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
useLang: 'en'
});
Of particular note, the line before last, and the second line contain the language name – it can be whatever you like, but if you choose to load multiple files on a page the name must be unique. Most values are optional, if you choose not to supply them datebox will fall back to the default values defined in the CORE file. This is particularly useful as you shouldn’t need to track the main distribution to ensure your existing language files will work with new versions. For a complete listing of what each of these options means, please see the API.
Correcting Mistakes / Submitting New Translations
If you wish to correct a mistake in the DateBox repository, or submit a language that does not already exist, you can send a merge request via GitHub, send me an e-mail direct (link at the bottom of every page), or contribute via CrowdIn (like at the bottom of every page). Individual translators are noted in the language file they contributed to.
http://dev.jtsage.com/jQM-DateBox/
Thanks,
SABIT SOLUTIONS