NJ Web Design System (v2.1.0)

Date Picker: Default 

<form class="usa-form">
    <div class="usa-form-group">
        <label class="usa-label" id="appointment-date-label" for="appointment-date">Appointment date</label>
        <div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
        <div class="usa-date-picker">
            <input class="usa-input" id="appointment-date" name="appointment-date" type="text" aria-describedby="appointment-date-label appointment-date-hint">
        </div>
    </div>
</form>

No notes defined.

<form class="usa-form">
  <div class="usa-form-group">
    <label class="usa-label" id="appointment-date-label" for="appointment-date">Appointment date</label>
    <div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
    <div class="usa-date-picker"
      {% if datePicker.defaultDate %} data-default-date="{{ datePicker.defaultDate }}"{% endif %}
      {% if datePicker.defaultValue %} data-default-value="{{ datePicker.defaultValue }}"{% endif %}
      {% if datePicker.rangeDate %} data-range-date="{{ datePicker.rangeDate }}"{% endif %}
      {% if datePicker.minDate %} data-min-date="{{ datePicker.minDate }}"{% endif %}
      {% if datePicker.maxDate %} data-max-date="{{ datePicker.maxDate }}"{% endif %}
    >
      <input 
        class="usa-input" 
        id="appointment-date" 
        name="appointment-date" 
        type="text" 
        aria-describedby="appointment-date-label appointment-date-hint"
        {% if datePicker.disabled %} disabled{% endif %}
      >
    </div>
  </div>
</form>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist