The month input component is used to allow the user to select a month from a dropdown menu. It is used as a replacement for traditional text input when selecting a month.
Example
Enables month and year selection.
code
<script type="module">
import '@blueprintui/components/include/month.js';
</script>
<bp-field>
<label>month</label>
<bp-month></bp-month>
<bp-field-message>message</bp-field-message>
</bp-field>Vertical
Demonstrates the month picker in vertical form layout.
code
<bp-form-group layout="vertical">
<bp-field layout="vertical">
<label>label</label>
<bp-month></bp-month>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="vertical">
<label>disabled</label>
<bp-month disabled></bp-month>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="error">
<label>error</label>
<bp-month></bp-month>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="success">
<label>success</label>
<bp-month></bp-month>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Horizontal
Demonstrates the month picker in horizontal form layout.
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-month></bp-month>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="horizontal">
<label>disabled</label>
<bp-month disabled></bp-month>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="error">
<label>error</label>
<bp-month></bp-month>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="success">
<label>success</label>
<bp-month></bp-month>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Compact
Demonstrates the month picker in compact form layout.
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-month></bp-month>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="compact">
<label>disabled</label>
<bp-month disabled></bp-month>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="error">
<label>error</label>
<bp-month></bp-month>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="success">
<label>success</label>
<bp-month></bp-month>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Install
NPM
// npm package
import '@blueprintui/components/include/month.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/month.js/+esm';
</script>Accessibility
- The component should be keyboard accessible, allowing users to select a month using only the keyboard.
- The component should provide clear and descriptive text for the selected month to improve accessibility for users with visual impairments.
Browser Support
Native input type month is not supported in Safari or Firefox. See caniuse for more details.
bp-month
Events
| Name | Types | Description |
|---|---|---|
input | InputEvent | occurs when the value changes |
change | InputEvent | occurs when the value changes |
Properties
| Name | Types | Description |
|---|---|---|
type | string | Specifies the input type as month for date selection |
value | string | number | FormData | File | Defines the current value of the input for form submission and validation |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
formNoValidate | boolean | determines if the form control is novalidate |
name | string | represents the name of the current |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |
formAssociated | boolean | |
valueAsNumber | ||
composedLabel | ||
focus | ||
reset |
Attributes
| Name | Types | Description |
|---|---|---|
type | string | Specifies the input type as month for date selection |
value | string | number | FormData | File | Defines the current value of the input for form submission and validation |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
formNoValidate | boolean | determines if the form control is novalidate |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background-size | ||
--color | ||
--background | ||
--border | ||
--border-radius | ||
--outline | ||
--outline-offset | ||
--padding | ||
--font-size | ||
--line-height | ||
--height | ||
--min-width | ||
--width | ||
--transition | ||
--text-align | ||
--cursor |
Slots
| Name | Types | Description |
|---|---|---|
prefix | slot for prefix text or icons | |
suffix | slot for suffix text or icons |