<MonthPicker>
The MonthPicker component renders a grid of checkboxes with shortened month names as well as buttons for selecting or deselecting all. For internationalization one can pass a locale prop, and the month names will change to match the language of the locale. Full month names are also included as aria-label attributes.
Code snippet
<fieldset class="ds-c-fieldset ds-c-month-picker" aria-invalid="true">
<legend class="ds-c-label" id="field_1-label">
<span class="">Select a month from Default Month Picker</span>
<span class="ds-c-field__hint">
Month Picker can receive optional help text, giving the user additional
information of what's required.
</span>
<span
class="ds-c-inline-error ds-c-field__error-message"
id="field_1-error"
role="alert"
>
<svg
aria-hidden="true"
class="ds-c-icon ds-c-icon--alert-circle"
focusable="false"
id="icon-2"
viewBox="36 -12 186 186"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M162.18 41.592c-5.595-9.586-13.185-17.176-22.771-22.771-9.588-5.595-20.055-8.392-31.408-8.392-11.352 0-21.821 2.797-31.408 8.392-9.587 5.594-17.177 13.184-22.772 22.771-5.596 9.587-8.393 20.057-8.393 31.408 0 11.351 2.798 21.82 8.392 31.408 5.595 9.584 13.185 17.176 22.772 22.771 9.587 5.595 20.056 8.392 31.408 8.392s21.822-2.797 31.408-8.392c9.586-5.594 17.176-13.185 22.771-22.771C167.773 94.82 170.57 84.35 170.57 73c0-11.351-2.797-21.822-8.39-31.408zm-43.75 70.433c0 .761-.246 1.398-.734 1.914s-1.086.773-1.793.773H100.26c-.706 0-1.331-.271-1.874-.814-.543-.543-.814-1.168-.814-1.873V96.546c0-.706.271-1.331.814-1.874.543-.543 1.168-.814 1.874-.814h15.643c.707 0 1.306.258 1.793.773.488.518.734 1.154.734 1.915v15.479zm-.164-28.026c-.055.543-.339 1.019-.854 1.426-.517.407-1.154.61-1.914.61h-15.073c-.761 0-1.413-.203-1.956-.61-.543-.407-.815-.883-.815-1.426l-1.385-50.595c0-.653.271-1.141.814-1.467.544-.434 1.196-.652 1.956-.652h17.926c.761 0 1.412.217 1.955.652.543.326.813.815.813 1.467l-1.467 50.595z"
></path>
</svg>
Please meet form requirements.
</span>
</legend>
<div class="ds-c-month-picker__buttons ds-u-clearfix">
<button
class="ds-c-button ds-c-button--small ds-c-month-picker__button"
type="button"
aria-pressed="false"
>
Select all
</button>
<button
class="ds-c-button ds-c-button--small ds-c-month-picker__button"
type="button"
aria-pressed="true"
>
Clear all
</button>
</div>
<div class="ds-c-month-picker__months">
<ol class="ds-c-list--bare ds-c-month-picker__months-list">
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_3"
aria-label="January"
name="DefaultMonthPicker"
type="checkbox"
value="1"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_3">
<span class="">Jan</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_4"
aria-label="February"
name="DefaultMonthPicker"
type="checkbox"
value="2"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_4">
<span class="">Feb</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_5"
aria-label="March"
name="DefaultMonthPicker"
type="checkbox"
value="3"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_5">
<span class="">Mar</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_6"
aria-label="April"
name="DefaultMonthPicker"
type="checkbox"
value="4"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_6">
<span class="">Apr</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_7"
aria-label="May"
name="DefaultMonthPicker"
type="checkbox"
value="5"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_7">
<span class="">May</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_8"
aria-label="June"
name="DefaultMonthPicker"
type="checkbox"
value="6"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_8">
<span class="">Jun</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_9"
aria-label="July"
name="DefaultMonthPicker"
type="checkbox"
value="7"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_9">
<span class="">Jul</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_10"
aria-label="August"
name="DefaultMonthPicker"
type="checkbox"
value="8"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_10">
<span class="">Aug</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_11"
aria-label="September"
name="DefaultMonthPicker"
type="checkbox"
value="9"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_11">
<span class="">Sep</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_12"
aria-label="October"
name="DefaultMonthPicker"
type="checkbox"
value="10"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_12">
<span class="">Oct</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_13"
aria-label="November"
name="DefaultMonthPicker"
type="checkbox"
value="11"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_13">
<span class="">Nov</span>
</label>
</div>
</div>
</li>
<li>
<div class="ds-c-month-picker__month">
<div class="ds-c-choice-wrapper">
<input
class="ds-c-choice"
id="checkbox_DefaultMonthPicker_14"
aria-label="December"
name="DefaultMonthPicker"
type="checkbox"
value="12"
/>
<label class="ds-c-label" for="checkbox_DefaultMonthPicker_14">
<span class="">Dec</span>
</label>
</div>
</div>
</li>
</ol>
</div>
</fieldset>
Props
| Name | Type | Default | Description |
|---|---|---|---|
namerequired | string | The | |
locale | string | ||
className | string | Additional classes to be added to the root element. | |
buttonVariation | ButtonVariation | Variation string to be applied to buttons. See Button component | |
disabledMonths | number[] | Array of month numbers, where | |
selectedMonths | number[] | Array of month numbers, where | |
defaultSelectedMonths | number[] | Array of month numbers, where | |
onChange | (event: React.ChangeEvent<HTMLInputElement>) => any | A callback function that's invoked when a month's checked state is changed.
Note: This callback is not called when a month is selected or deselected
via the "Select all" or "Clear all" buttons – use the | |
onSelectAll | () => any | ||
onClearAll | () => any | ||
selectAllText | string | The text for the "Select all" button for internationalization | |
clearAllText | string | The text for the "Clear all" button for internationalization |
Customization
The following Sass variables can be overridden to customize MonthPicker fields: