input month
The date input element let the user enter and edit a month.
The control's user interface varies from browser to browser. It was not styled by FROK (browser native behaviour).
Cross-browser support is currently a bit limited, with only Chrome/Opera and Microsoft Edge supporting it at this time.
In non-supporting browsers (e.g. Firefox), the control degrades gracefully to function identically to input of type="text".
According to the Web Content Accessibility Guidelines (WCAG), it is highly recommended to use a label together with the date input.
This component works with all its features only in browsers that have support for the
If you need to run this component in a browser with no support for the
:has
CSS selector. Please refer to the
reference on MDN.
If you need to run this component in a browser with no support for the
:has
CSS selector, please use the
FROK Release 3.6.x.
table of content
- description
- component variations
- input month
- input month readonly
- input month disabled
- input month with label
- input month with label readonly
- input month with label disabled
- input month with very long label
- input month with very long label readonly
- input month with very long label disabled
- input month with min and max date
- input month with min and max date over years
- input month with min and max date with step
- style scss
component variations
input month
<div class="a-month-input">
<input type="month" id="month-input-1" name="input month" />
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month readonly
<div class="a-month-input">
<input
type="month"
id="month-input-2"
name="input month readonly"
readonly=""
value="2024-08"
/>
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month disabled
<div class="a-month-input">
<input
type="month"
id="month-input-3"
name="input month disabled"
disabled=""
value="2024-08"
/>
<button
type="button"
class="a-month-input__button"
disabled=""
aria-label="open dialog"
>
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with label
<div class="a-month-input">
<label for="month-input-4">Start month:</label>
<input type="month" id="month-input-4" name="input month with label" />
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with label readonly
<div class="a-month-input">
<label for="month-input-5">Start month:</label>
<input
type="month"
id="month-input-5"
name="input month with label readonly"
readonly=""
value="2024-08"
/>
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with label disabled
<div class="a-month-input">
<label for="month-input-6">Start month:</label>
<input
type="month"
id="month-input-6"
name="input month with label disabled"
disabled=""
value="2024-08"
/>
<button
type="button"
class="a-month-input__button"
disabled=""
aria-label="open dialog"
>
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with very long label
<div class="a-month-input">
<label for="month-input-7">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="month"
id="month-input-7"
name="input month with very long label"
/>
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with very long label readonly
<div class="a-month-input">
<label for="month-input-8">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="month"
id="month-input-8"
name="input month with very long label readonly"
readonly=""
value="2024-08"
/>
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with very long label disabled
<div class="a-month-input">
<label for="month-input-9">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="month"
id="month-input-9"
name="input month with very long label disabled"
disabled=""
value="2024-08"
/>
<button
type="button"
class="a-month-input__button"
disabled=""
aria-label="open dialog"
>
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with min and max date
<div class="a-month-input">
<input
type="month"
id="month-input-10"
name="input month with min and max date"
min="2024-05"
max="2024-08"
/>
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with min and max date over years
<div class="a-month-input">
<input
type="month"
id="month-input-11"
name="input month with min and max date over years"
min="2023-11"
max="2024-08"
/>
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
input month with min and max date with step
<div class="a-month-input">
<input
type="month"
id="month-input-12"
name="input month with min and max date with step"
min="2023-11"
max="2024-08"
step="2"
/>
<button type="button" class="a-month-input__button" aria-label="open dialog">
<i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
</button>
</div>
additional content
styles SCSS
.a-month-input {
display: flex;
min-width: 14rem;
@include text-field;
input {
text-transform: uppercase;
&::-webkit-datetime-edit-month-field:focus,
&::-webkit-datetime-edit-year-field:focus {
color: var(--neutral__enabled__front__default);
background-color: var(--neutral__focused__fill__default);
mix-blend-mode: multiply;
}
&[readonly],
&:disabled {
+.a-month-input__button {
display: none;
}
}
&::-webkit-calendar-picker-indicator {
display: none;
}
}
@supports (-moz-appearance:none) {
&__button {
display: none;
}
label {
max-width: calc(100% - 2rem);
}
}
}```