Skip to content

Instantly share code, notes, and snippets.

@rk185371

rk185371/dateinput.html

Created September 7, 2022 14:42
Show Gist options
  • Save rk185371/1747e35ccd957dda43d0486955840352 to your computer and use it in GitHub Desktop.
Save rk185371/1747e35ccd957dda43d0486955840352 to your computer and use it in GitHub Desktop.
Download ZIP
date input
Raw
dateinput.html
<div class="auth-field ncr-195wnui">
<div class="scrollable-field-container date-of-birth">
<div class=" form-input-group"><label for="dateOfBirth" class="form-label default required ncr-udiuai e88h3vw0">Date
of birth<span class="required" aria-hidden="true"> *</span></label>
<div class="date-field-container">
<div class="date-input-wrapper default invalid ncr-q4fnin e88h3vw0">
<div class="SingleDatePicker SingleDatePicker_1 SingleDatePicker__block SingleDatePicker__block_2">
<div>
<div class="SingleDatePickerInput SingleDatePickerInput_1 SingleDatePickerInput__block SingleDatePickerInput__block_2">
<div class="DateInput DateInput_1 DateInput__small DateInput__small_2 DateInput__block DateInput__block_3">
<input class="DateInput_input DateInput_input_1 DateInput_input__small DateInput_input__small_2"
aria-label="Date of birth Required" type="text" id="dateOfBirth"
name="dateOfBirth" placeholder="MM/DD/YYYY" autocomplete="off"
aria-describedby="dateOfBirth-field-message-45" value="" maxlength="10"
aria-invalid="true">
<p class="DateInput_screenReaderMessage DateInput_screenReaderMessage_1"
id="DateInput__screen-reader-message-dateOfBirth">Navigate forward to interact
with the calendar and select a date. Press the question mark key to get the
keyboard shortcuts for changing dates.</p></div>
<button class="SingleDatePickerInput_calendarIcon SingleDatePickerInput_calendarIcon_1"
type="button" aria-label="Toggle date picker">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="calendar-alt"
class="svg-inline--fa fa-calendar-alt fa-w-14 " role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor"
d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="dateOfBirth-field-message-45" class="field-error default ncr-mqe676">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="exclamation-circle"
class="svg-inline--fa fa-exclamation-circle fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" style="margin-right: 5px;">
<path fill="currentColor"
d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"></path>
</svg>
<span class="text ncr-1ibpmnv">Enter your birth date in MM/DD/YYYY format</span></div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment