Respondants require a standard method of entering date type values.
Global
/components/02-form-elements/input.scss/components/02-form-elements/input-type/_input-type.scss
<!-- Default -->
<div class="answer answer--date">
<div class="answer__fields js-fields">
<fieldset class="fieldgroup fieldgroup--date" data-qa="widget-date">
<div class="fieldgroup__fields">
<div class="field field--input field--day">
<label class="label mercury" data-qa="label-day">Day</label>
<input placeholder="DD" value="" data-qa="input-StringField" class="input input--StringField ">
</div>
<div class="field field--select field--month">
<label class="label mercury" for="date-range-from-month" id="label-date-range-from-month" data-qa="label-month">Month</label>
<select class="input input--select" id="date-range-from-month" name="date-range-from-month">
<option value=""
disabled="disabled"
selected="selected">Select month</option>
<option value="1"
>January</option>
<option value="2"
>February</option>
<option value="3"
>March</option>
<option value="4"
>April</option>
<option value="5"
>May</option>
<option value="6"
>June</option>
<option value="7"
>July</option>
<option value="8"
>August</option>
<option value="9"
>September</option>
<option value="10"
>October</option>
<option value="11"
>November</option>
<option value="12"
>December</option>
</select>
</div>
<div class="field field--input field--year">
<label class="label mercury" data-qa="label-year">Year</label>
<input placeholder="YYYY" value="" data-qa="input-StringField" class="input input--StringField ">
</div>
</div>
</fieldset>
</div>
</div>
<!-- Range -->
<div class="answer answer--date">
<div class="answer__fields js-fields">
<fieldset class="fieldgroup fieldgroup--date" data-qa="widget-date">
<legend class="fieldgroup__title venus">Period from</legend>
<div class="fieldgroup__fields">
<div class="field field--input field--day">
<label class="label mercury" data-qa="label-day">Day</label>
<input placeholder="DD" value="" data-qa="input-StringField" class="input input--StringField ">
</div>
<div class="field field--select field--month">
<label class="label mercury" for="date-range-from-month" id="label-date-range-from-month" data-qa="label-month">Month</label>
<select class="input input--select" id="date-range-from-month" name="date-range-from-month">
<option value=""
disabled="disabled"
selected="selected">Select month</option>
<option value="1"
>January</option>
<option value="2"
>February</option>
<option value="3"
>March</option>
<option value="4"
>April</option>
<option value="5"
>May</option>
<option value="6"
>June</option>
<option value="7"
>July</option>
<option value="8"
>August</option>
<option value="9"
>September</option>
<option value="10"
>October</option>
<option value="11"
>November</option>
<option value="12"
>December</option>
</select>
</div>
<div class="field field--input field--year">
<label class="label mercury" data-qa="label-year">Year</label>
<input placeholder="YYYY" value="" data-qa="input-StringField" class="input input--StringField ">
</div>
</div>
</fieldset>
</div>
</div>
<div class="answer answer--date">
<div class="answer__fields js-fields">
<fieldset class="fieldgroup fieldgroup--date" data-qa="widget-date">
<legend class="fieldgroup__title venus">Period to</legend>
<div class="fieldgroup__fields">
<div class="field field--input field--day">
<label class="label mercury" data-qa="label-day">Day</label>
<input placeholder="DD" value="" data-qa="input-StringField" class="input input--StringField ">
</div>
<div class="field field--select field--month">
<label class="label mercury" for="date-range-from-month" id="label-date-range-from-month" data-qa="label-month">Month</label>
<select class="input input--select" id="date-range-from-month" name="date-range-from-month">
<option value=""
disabled="disabled"
selected="selected">Select month</option>
<option value="1"
>January</option>
<option value="2"
>February</option>
<option value="3"
>March</option>
<option value="4"
>April</option>
<option value="5"
>May</option>
<option value="6"
>June</option>
<option value="7"
>July</option>
<option value="8"
>August</option>
<option value="9"
>September</option>
<option value="10"
>October</option>
<option value="11"
>November</option>
<option value="12"
>December</option>
</select>
</div>
<div class="field field--input field--year">
<label class="label mercury" data-qa="label-year">Year</label>
<input placeholder="YYYY" value="" data-qa="input-StringField" class="input input--StringField ">
</div>
</div>
</fieldset>
</div>
</div>
/* Default */
{
"dayLabel": "Day",
"monthLabel": "Month",
"yearLabel": "Year",
"months": [
{
"label": "Select month",
"selected": true,
"disabled": true,
"value": null
},
{
"label": "January",
"value": "1"
},
{
"label": "February",
"value": "2"
},
{
"label": "March",
"value": "3"
},
{
"label": "April",
"value": "4"
},
{
"label": "May",
"value": "5"
},
{
"label": "June",
"value": "6"
},
{
"label": "July",
"value": "7"
},
{
"label": "August",
"value": "8"
},
{
"label": "September",
"value": "9"
},
{
"label": "October",
"value": "10"
},
{
"label": "November",
"value": "11"
},
{
"label": "December",
"value": "12"
}
]
}
/* Range */
{
"dayLabel": "Day",
"monthLabel": "Month",
"yearLabel": "Year",
"months": [
{
"label": "Select month",
"selected": true,
"disabled": true,
"value": null
},
{
"label": "January",
"value": "1"
},
{
"label": "February",
"value": "2"
},
{
"label": "March",
"value": "3"
},
{
"label": "April",
"value": "4"
},
{
"label": "May",
"value": "5"
},
{
"label": "June",
"value": "6"
},
{
"label": "July",
"value": "7"
},
{
"label": "August",
"value": "8"
},
{
"label": "September",
"value": "9"
},
{
"label": "October",
"value": "10"
},
{
"label": "November",
"value": "11"
},
{
"label": "December",
"value": "12"
}
]
}