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

    <input type="text" value="02-16-2012">

## component

Adding the `date` class to an `input-group` bootstrap component will allow the `input-group-addon` elements to trigger the picker.

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

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

    <div class="input-group input-daterange">
        <input type="text" class="form-control" value="2012-04-05">
        <span class="input-group-addon">to</span>
        <input type="text" class="form-control" value="2012-04-19">
    </div>

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.

    <div data-date="12/03/2012"></div>

Example to save the embedded datepicker value to a hidden field

    <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')
        );
    });