| Server IP : 49.231.201.246 / Your IP : 216.73.216.149 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /proc/11585/cwd/html/ppaobm/vendor/bower-asset/bootstrap-datepicker/docs/ |
Upload File : |
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')
);
});