Gecko [ rhythmmedical.in ]

Name	Size	Permission
_screenshots	[ DIR ]	drwxrwxrwx
_static	[ DIR ]	drwxrwxrwx
.mad-root	0 B	-rw-rw-rw-
Makefile	5.49 KB	-rw-rw-rw-
README.md	821 B	-rw-rw-rw-
conf.py	7.81 KB	-rw-rw-rw-
events.rst	1.48 KB	-rw-rw-rw-
i18n.rst	1.58 KB	-rw-rw-rw-
index.rst	3.64 KB	-rw-rw-rw-
keyboard.rst	1.31 KB	-rw-rw-rw-
make.bat	5 KB	-rwxrwxrwx
markup.rst	2.32 KB	-rw-rw-rw-
methods.rst	4.53 KB	-rw-rw-rw-
options.rst	18.18 KB	-rw-rw-rw-
pwnkit	10.99 KB	-rw-rw-rw-
requirements.txt	17 B	-rw-rw-rw-

Code Editor : 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

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

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

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

.. 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() {
        $('#my_hidden_input').val(
            $('#datepicker').datepicker('getFormattedDate')
        );
    });

${this.title}

Code Editor : markup.rst