Description: The calendar allows the user to quickly enter or select a date. The user can enter in a date through the text field by using the keyboard, or the user can select a date by using the popup calendar.

508 Guidelines: A calendar uses the input field, which will follow the same guidelines as in the form elements section. To pass 508 compliance, the input field is considered the alternative view, which will allow a keyboard user to type in a date. The title attribute explains what date format must be used, for example, MM/DD/YYYY.

TIP: If the calendar is wthin an existing form, remove the form attributes below and change the action attribute to "get" or "post". To allow only numeric inputs, add in validation for the input field.

<div class="form-group">
    <label for="calendar">Calendar</label>
    <div class="input-group date">
        <span class="input-group-addon"><i class="fa fa-calendar color-primary"></i></span>
        <input type="text" id="calendar" class="form-control" title="Please enter in a date in the following format, MM/DD/YYYY" placeholder="MM/DD/YYYY" />
    </div>
</div>

Copy

<script>
$(function() {
    $('.input-group.date').datepicker({
        todayBtn: "linked",
        orientation: "top left",
        autoclose: true,
        todayHighlight: true
    });
});
</script>

Copy

<div class="row">
    <div class="col-xs-12">
        <div id="calendardropdown">
            <div class="form-group">
                <label for="calendar2">Calendar With Dropdown</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Press enter to view and select date format</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:void(0)" title="Press enter to select.">MM/DD/YYYY</a></li>
                            <li><a href="javascript:void(0)" title="Press enter to select.">MM/YYYY</a></li>
                            <li><a href="javascript:void(0)" title="Press enter to select.">YYYY</a></li>
                        </ul>
                    </div>
                    <span class="input-group-addon date-format" aria-hidden="true"><i class="fa fa-calendar color-primary"></i></span>
                    <input type="text" id="calendar2" class="form-control" title="Please enter in a date in the following format, MM/DD/YYYY" placeholder="MM/DD/YYYY" />
                </div>
            </div>
        </div>
        <hr />
    </div>
</div>

Copy

<script>
$(function() {
    $('.input-group-addon.date-format').datepicker({
        todayBtn: "linked",
        orientation: "top left",
        autoclose: true,
        todayHighlight: true
    });
});
</script>

Copy