I18n Date Input

Default

Breaks down a date field into day, month, and year fields. It then recombines them into a date when the user interacts with the fields. It properly reorders according to the locale of the browser.

HTML

<div class="t-content" ng-controller="threeFieldDateInputExampleController as threeFieldDateInput">
    <form class="c-form c-generalForm" name="threeFieldDateInput.form" autocomplete="off">
        <div class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Some Date</label>
                <three-field-date-input name="test" ng-model="threeFieldDateInput.initialDate"></three-field-date-input>
            </div>
        </div>
    </form>
    <pre ng-bind="threeFieldDateInput.form.test | json"></pre>
    <div ng-bind="threeFieldDateInput.initialDate"></div>
</div>

Required

Validates as required.

HTML

<div class="t-content" ng-controller="threeFieldDateInputExampleController as threeFieldDateInput">
    <form class="c-form c-generalForm" name="threeFieldDateInput.form" autocomplete="off">
        <div class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Some Date</label>
                <three-field-date-input required name="test" ng-model="threeFieldDateInput.initialDate"></three-field-date-input>
            </div>
        </div>
    </form>
    <pre ng-bind="threeFieldDateInput.form.test | json"></pre>
    <div ng-bind="threeFieldDateInput.initialDate"></div>
</div>

With Min Date

Validates against an optional min date.

HTML

<div class="t-content" ng-controller="threeFieldDateInputExampleController as threeFieldDateInput">
    <form class="c-form c-generalForm" name="threeFieldDateInput.form" autocomplete="off">
        <div class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Some Date</label>
                <three-field-date-input name="test" min-date="threeFieldDateInput.minDate" ng-model="threeFieldDateInput.initialDate"></three-field-date-input>
            </div>
        </div>
    </form>
    <pre ng-bind="threeFieldDateInput.form.test | json"></pre>
    <div ng-bind="threeFieldDateInput.initialDate"></div>
    <div ng-bind="threeFieldDateInput.minDate"></div>
</div>

With Max Date

Validates against an optional max date.

HTML

<div class="t-content" ng-controller="threeFieldDateInputExampleController as threeFieldDateInput">
    <form class="c-form c-generalForm" name="threeFieldDateInput.form" autocomplete="off">
        <div class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <label>Some Date</label>
                <three-field-date-input name="test" max-date="threeFieldDateInput.maxDate" ng-model="threeFieldDateInput.initialDate"></three-field-date-input>
            </div>
        </div>
    </form>
    <pre ng-bind="threeFieldDateInput.form.test | json"></pre>
    <div ng-bind="threeFieldDateInput.initialDate"></div>
    <div ng-bind="threeFieldDateInput.maxDate"></div>
</div>

Disabled State

Showing disabled state capabilities

HTML

<div class="t-content" ng-controller="threeFieldDateInputExampleController as threeFieldDateInput">
    <form class="c-form c-generalForm" name="threeFieldDateInput.form" autocomplete="off">
        <div class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <inv-checkbox>
                    <input id="disable" type="checkbox" ng-model="threeFieldDateInput.isDisabled" />
                    <label for="disable">Is Disabled</label>
                </inv-checkbox>
                <three-field-date-input ng-disabled="threeFieldDateInput.isDisabled" name="test" ng-model="threeFieldDateInput.initialDate"></three-field-date-input>
            </div>
        </div>
    </form>
    <pre ng-bind="threeFieldDateInput.form.test | json"></pre>
    <div ng-bind="threeFieldDateInput.initialDate"></div>
</div>