DateBox is a jQuery 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.
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). Note also these demos use the Bootstrap v4 version of DateBox, and the markup conventions of Bootstrap.
This sample is the most simple version of the "calbox" varient. Note that DateBox automatically enhances properlly tagged elements. If you need a simple date input with no limits, logic, or customization, it is as simple as adding an input element. Note the use of the data-role attribute, which is what allows DateBox to automaticaly enhance. At least the mode option is required if your build includes more than one mode.
<div class="form-group">
<label class="control-label"for="db1">CalBox style DateBox</label>
<input class="form-control" name="db1" type="text" data-role="datebox" data-datebox-mode="calbox" id="db1">
</div>
Should you wish to direct the placement of the rendered DateBox control for inline or blind display methods, Drop a named div anywhere on the page with the id of [DateBox ID]-dbAttach. Note that this may very well break positioning on the dropdown mode, but is very useful for inline and blind modes.
<div id="db1-dbAttach"></div>
DateBox is extreamlly full featured. Included are:
DateBox requires jQuery, version 2 or 3, and will run fine with the "slim" builds of version 3.
DateBox requires a modern browser. IE8 is unsupported as of v5, but with a polyfill library loaded, will probably run.
DateBox requires the jQueryUI widget library. Built versions of DateBox include it in their source files, unless the framework in use typically has it already. (Example: jQM uses an altered, but API compatible version).
DateBox is currently has builds for the following:
Downloading your own build of DateBox is the prefeerred method of installing DateBox. To build your own download, head to the DateBox Download Builder. Prebuilt versions are also available through npm and Github.
If you prefer to have the files elsewhere, complete (all modes) builds are available on the jsdelivr CDN.
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-bootstrap3@5.3.3/jtsage-datebox.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-bootstrap4@5.3.3/jtsage-datebox.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-bulmas@5.3.3/jtsage-datebox.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-foundation6@5.3.3/jtsage-datebox.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-fomanticui@5.3.3/jtsage-datebox.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-jqm@5.3.3/jtsage-datebox.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-uikit@5.3.3/jtsage-datebox.min.js" type="text/javascript"></script>
You should (but are not required) to include at least one language file. The defaults in DateBox are sort of an international english, with a bent of following ISO-8601. To find the most appropriate language, browse the list on the i18n CDN. It is also possible to serve the ".lang" file and leverage the useLang option (discussed later).
<script src="https://cdn.jsdelivr.net/npm/jtsage-datebox-i18n/jquery.mobile.datebox.i18n.en_US.utf8.js" type="text/javascript" ></script>
Upgrading from version 4? Most things will work as-is. Check out the UPGRADEING.md document in the repository for details.