VA Pattern Library

Date Picker 

<!-- SASS: src/stylesheets/_components/date-picker.scss -->
<!-- JS: src/js/date-picker.js -->
<!-- Vendor JS: src/js/_vendor/bootstrap-datepicker.js -->

<fieldset>
    <legend>Set a Date</legend>

    <label for="startDate">Start Date</label>
    <span class="usa-form-hint">For example: MM/DD/YYYY</span>
    <!-- Datepicker input start -->
    <div class="vaux-date-picker-input" data-datepicker-trigger>
        <input id="startDate" name="startDate" type="text" aria-expanded="false">
        <button class="usa-button" aria-label="Open Calendar"><i class="fa fa-calendar" aria-hidden="true"></i></button>
    </div>
    <!-- Datepicker input end -->
</fieldset>

<fieldset>

    <label for="endDate">End Date</label>
    <span class="usa-form-hint">For example: MM/DD/YYYY</span>
    <!-- Datepicker input start -->
    <div class="vaux-date-picker-input" data-datepicker-trigger>
        <input id="endDate" name="endDate" type="text" aria-expanded="false">
        <button class="usa-button" aria-label="Open Calendar"><i class="fa fa-calendar" aria-hidden="true"></i></button>
    </div>
    <!-- Datepicker input end -->
</fieldset>

<label for="dateofBirth">Date of Birth</label>
<span class="usa-form-hint">For example: MM/DD/YYYY</span>
<input id="dateofBirth" name="dateofBirth" type="date">