Back to Snippets List

form - Form Date

Date of birth
For example, 31 03 1980
<form>
    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
                    Date of birth
                </span>
            </legend>

            <div class="form-date form-group form-date-group" data-grouped-inputs>

                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Day" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Month" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Year" data-valmsg-replace="true"></span>

                <span class="form-hint">For example, 31 03 1980</span>
                <div class="form-group-day" data-grouped-input>
                    <label for="Child.DateOfBirth.Day">Day</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="Child_DateOfBirth_Day" name="Child.DateOfBirth.Day" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-month" data-grouped-input>
                    <label for="Child.DateOfBirth.Month">Month</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="Child_DateOfBirth_Month" name="Child.DateOfBirth.Month" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-year" data-grouped-input>
                    <label for="Child.DateOfBirth.Year">Year</label>
                    <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="Child_DateOfBirth_Year" name="Child.DateOfBirth.Year" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

            </div>
        </fieldset>

    </div>

    <button type="submit" class="button">Submit</button>

</form>

Form Date

This component should be used when any single date is entered.

It validates multiple things:


Notes


Changelog

5th August 2015

12th August 2015

24th August 2015