Date

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="grid-container">
    <div class="column-two-thirds">
        <div class="form-group">
            <form>
                <fieldset>
                    <legend>
                        <h3 class="h3">
                            What was the due date?
                        </h3>
                    </legend>
                    <div class="form-date">
                        <p class="form-hint">This is a piece of hint text.</p>
                        <div class="form-group form-group-day">
                            <label for="overdue-day">Day</label>
                            <input id="overdue-day" type="text" name="day" placeholder="DD" pattern="[0-9]*" min="0" max="31" class="form-control"></div>
                        <div class="form-group form-group-month">
                            <label for="overdue-month">Month</label>
                            <input id="overdue-month" type="text" name="month" placeholder="MM" pattern="[0-9]*" min="0" max="12" class="form-control"></div>
                        <div class="form-group form-group-year">
                            <label for="overdue-year">Year</label>
                            <input id="overdue-year" type="text" name="year" placeholder="YYYY" pattern="[0-9]*" min="0" class="form-control"></div>
                    </div>
                </fieldset>
            </form>
        </div>

        <hr/>

        <h6 class="h6">Validation example</h6>

        <div class="form-group">

            <div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
                <h4 class="h4 error-summary-heading" id="error-summary-heading-example-1">
                    Message to alert the user to a problem goes here
                </h4>
                <p>
                    Optional description of the errors and how to correct them
                </p>
                <ul class="error-summary-list">
                    <li>
                        <a href="#example-personal-details">Descriptive link to the question with an error</a>
                    </li>
                </ul>
            </div>

            <form>
                <fieldset>
                    <legend>
                        <h3 class="h3">
                            What was the due date?
                        </h3>
                    </legend>
                    <div class="form-date">
                        <p class="error-message">Please choose a valid date before, or including, today.</p>
                        <div class="form-group form-group-day">
                            <label for="overdue-day">Day</label>
                            <input id="overdue-day" type="text" name="day" placeholder="DD" pattern="[0-9]*" min="0" max="31" class="form-control form-control-error"></div>
                        <div class="form-group form-group-month">
                            <label for="overdue-month">Month</label>
                            <input id="overdue-month" type="text" name="month" placeholder="MM" pattern="[0-9]*" min="0" max="12" class="form-control form-control-error"></div>
                        <div class="form-group form-group-year">
                            <label for="overdue-year">Year</label>
                            <input id="overdue-year" type="text" name="year" placeholder="YYYY" pattern="[0-9]*" min="0" class="form-control form-control-error"></div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>


        <div class="grid-container">
	<div class="column-two-thirds">
		<div class="form-group">
			<form>
				<fieldset>
					<legend>
						<h3 class="h3">
							What was the due date?
						</h3>
					</legend>
					<div class="form-date">
						<p class="form-hint">This is a piece of hint text.</p>
						<div class="form-group form-group-day">
							<label for="overdue-day">Day</label>
							<input id="overdue-day" type="text" name="day" placeholder="DD" pattern="[0-9]*" min="0" max="31" class="form-control"></div>
						<div class="form-group form-group-month">
							<label for="overdue-month">Month</label>
							<input id="overdue-month" type="text" name="month" placeholder="MM" pattern="[0-9]*" min="0" max="12" class="form-control"></div>
						<div class="form-group form-group-year">
							<label for="overdue-year">Year</label>
							<input id="overdue-year" type="text" name="year" placeholder="YYYY" pattern="[0-9]*" min="0" class="form-control"></div>
					</div>
				</fieldset>
			</form>
		</div>

		<hr/>

		<h6 class="h6">Validation example</h6>

		<div class="form-group">

			<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
				<h4 class="h4 error-summary-heading" id="error-summary-heading-example-1">
					Message to alert the user to a problem goes here
				</h4>
				<p>
					Optional description of the errors and how to correct them
				</p>
				<ul class="error-summary-list">
					<li>
						<a href="#example-personal-details">Descriptive link to the question with an error</a>
					</li>
				</ul>
			</div>
			
			<form>
				<fieldset>
					<legend>
						<h3 class="h3">
							What was the due date?
						</h3>
					</legend>
					<div class="form-date">
						<p class="error-message">Please choose a valid date before, or including, today.</p>
						<div class="form-group form-group-day">
							<label for="overdue-day">Day</label>
							<input id="overdue-day" type="text" name="day" placeholder="DD" pattern="[0-9]*" min="0" max="31" class="form-control form-control-error"></div>
						<div class="form-group form-group-month">
							<label for="overdue-month">Month</label>
							<input id="overdue-month" type="text" name="month" placeholder="MM" pattern="[0-9]*" min="0" max="12" class="form-control form-control-error"></div>
						<div class="form-group form-group-year">
							<label for="overdue-year">Year</label>
							<input id="overdue-year" type="text" name="year" placeholder="YYYY" pattern="[0-9]*" min="0" class="form-control form-control-error"></div>
					</div>
				</fieldset>
			</form>
		</div>
	</div>
</div>


        
            
            /* No context defined for this component. */

File:

Content:


                                // Date pattern

// Hide the 'spinner' for webkit
// and also for Firefox
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.form-date {

  .form-group {
    float: left;
    width: 50px;

    margin-right: 20px;
    margin-bottom: 0;
    clear: none;

    label {
      display: block;
      padding-bottom: 2px;
    }

    input {
      width: 100%;
    }
  }

  .form-group-year {
    width: 70px;
  }
}

URL: /components/raw/date/date.scss
Filesystem Path: components/forms/date/date.scss
Size: 524 Bytes

Handle: @date
Preview:
- With layout
- Component only
Filesystem Path: components/forms/date/date.nunj

Date forms

TODO

cross-browser checks
demonstrate disabled state
demonstrate validation