%PDF- %PDF-
Direktori : /home/medipszd/www/bower_components/bootstrap-datepicker/docs/ |
Current File : /home/medipszd/www/bower_components/bootstrap-datepicker/docs/markup.rst |
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') ); });