ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / crmleta / libraries / bootstrap / js / eternicode-bootstrap-datepicker / docs

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

.. figure:: _static/screenshots/markup_input.png
    :align: center

component
---------

Adding the ``date`` class to an ``input-append`` or ``input-prepend`` bootstrap component will allow the ``add-on`` elements to trigger the picker.

.. code-block:: html

.. 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

.. figure:: _static/screenshots/markup_daterange.png
    :align: center

inline or embedded
------------------

Instantiating the datepicker on a simple div will give an embedded picker that is always visible.

.. code-block:: html

.. figure:: _static/screenshots/markup_inline.png
    :align: center

Example to save the embedded datepicker value to a hidden field

.. code-block:: html

$('#datepicker').datepicker();
    $("#datepicker").on("changeDate", function(event) {
        $("#my_hidden_input").val(
            $("#datepicker").datepicker('getFormattedDate')
         )
    });

[+] ..
[-] index.rst [edit]
[-] requirements.txt [edit]
[-] make.bat [edit]
[-] conf.py [edit]
[-] REAME.md [edit]
[-] methods.rst [edit]
[-] markup.rst [edit]
[-] Makefile [edit]
[+] _static
[-] options.rst [edit]
[-] README.md [edit]
[-] i18n.rst [edit]
[-] events.rst [edit]
[-] keyboard.rst [edit]
[+] _screenshots