Markup
¶ ↑
The following are examples of supported markup. On their own, these will not provide a datepicker widget; you will need to instantiate the datepicker on the markup.
input
The simplest case: focusing the input (clicking or tabbing into it) will show the picker.
- .. code-block
-
html
<input type="text" class="form-control" value="02-16-2012">
- .. figure
-
_static/screenshots/markup_input.png
:align: center
component
Adding the “date“ class to an “input-group“ bootstrap component will allow the “input-group-addon“ elements to trigger the picker.
- .. code-block
-
html
<div class="input-group date"> <input type="text" class="form-control" value="12-02-2012"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div>
- .. figure
-
_static/screenshots/markup_component.png
:align: center
.. _daterange:
date-range
Using the “input-daterange“ construct with multiple child inputs will instantiate one picker per input and link them together to allow selecting ranges.
- .. code-block
-
html
<div class="input-group input-daterange"> <input type="text" class="form-control" value="2012-04-05"> <div class="input-group-addon">to</div> <input type="text" class="form-control" value="2012-04-19"> </div>
- .. figure
-
_static/screenshots/markup_daterange.png
:align: center
Note that that “input-daterange“ itself does not implement the “datepicker“ methods. Methods should be directly called to the inputs. For example:
-
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
inline or embedded
Instantiating the datepicker on a simple div will give an embedded picker that is always visible.
- .. code-block
-
html
<div data-date="12/03/2012"></div>
- .. figure
-
_static/screenshots/markup_inline.png
:align: center
Example to save the embedded datepicker value to a hidden field
- .. code-block
-
html
<div id="datepicker" data-date="12/03/2012"></div> <input type="hidden" id="my_hidden_input">
-
$('#datepicker').datepicker(); $('#datepicker').on('changeDate', function() {
$('#my_hidden_input').val( $('#datepicker').datepicker('getFormattedDate') );
});