aboutsummaryrefslogtreecommitdiffhomepage
path: root/public/bower_components/bootstrap-datepicker/docs/markup.rst
diff options
context:
space:
mode:
authorMarvin Borner2018-07-13 19:06:45 +0200
committerMarvin Borner2018-07-13 19:06:45 +0200
commit6fcfb7c04d32e1c8b26a312295bf7ac3ec2d2ad7 (patch)
treedbc87ef16fa01d5d99116de283592b8fe5e02944 /public/bower_components/bootstrap-datepicker/docs/markup.rst
parentdfd839f27146df0ad0494e11734fc7d310c70ebf (diff)
Fixed many permissions and began admin interface
Diffstat (limited to 'public/bower_components/bootstrap-datepicker/docs/markup.rst')
-rw-r--r--public/bower_components/bootstrap-datepicker/docs/markup.rst89
1 files changed, 89 insertions, 0 deletions
diff --git a/public/bower_components/bootstrap-datepicker/docs/markup.rst b/public/bower_components/bootstrap-datepicker/docs/markup.rst
new file mode 100644
index 0000000..546b844
--- /dev/null
+++ b/public/bower_components/bootstrap-datepicker/docs/markup.rst
@@ -0,0 +1,89 @@
+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')
+ );
+ });