Date pickers are used to select or edit dates and display date related information. Date pickers can be used both as an expandable element when clicked, or by having the calendar part always visible. Read more about date pickers in the UX Guidelines.
Use when
To display date related information
The user needs to select a date
The user needs to edit a date
Design
This date picker is based on Vue. Here you can find more details about this component. If you like to use the component from the examples below you need to load these additional files: vue.min.js, buefy.min.js.
On this page you can find multiple types of date picker VUE.js component and the style variants:
<divid="app"style=""><section><b-fieldclass="form-group"label="Select a date"label-for="datepicker-exemple1"><b-datepickerid="datepicker-exemple1"ref="datepicker"v-model="date":years-range="[-100, 100]"expandedicon="calendar":first-day-of-week="1":nearby-selectable-month-days=true:month-names="month_names":day-names="day_names":close-on-click="false":show-week-number="showWeekNumber":unselectable-days-of-week="[0, 6]"editableplaceholder="Select a date"><buttonclass="btn btn-today" @click="date = new Date()">Today</button><buttonclass="btn btn-clear" @click="date = null">Clear</button></b-datepicker></b-field></section></div>
Inline date picker - one selection
This date picker can also be shown inline with the inline prop, input is removed. For this example you can seledct only one date. Follow the code example from below to get this date picker.
For this example you can select a range of dates, it's an inline example, without an input. Follow the code example from below to get this date picker.
<divid="app4"><section><b-fieldclass="form-group"label="Select the start date and end date of your vacation:"label-for="datepicker-exemple4"><b-datepickerv-model="date"ref="datepicker"icon="calendar"id="datepicker-exemple4"rangeexpandededitableplaceholder="Select a date":years-range="[-100, 100]":first-day-of-week="1":nearby-selectable-month-days=true:month-names="month_names":day-names="day_names":unselectable-days-of-week="[0, 6]":close-on-click="false":show-week-number="showWeekNumber"></b-datepicker></b-field></section></div>
<divid="app5"class="container"><b-fieldlabel="Select month and year"class="form-group month-picker"label-for="datepicker-exemple5"><b-datepickerid="datepicker-exemple5"type="month"editableplaceholder="Select month and year...":month-names="month_names":close-on-click="false"icon="calendar"></b-datepicker></b-field></div>
Date picker variants
Date picker with fill cell and square borders for the calendar cells
Add .datepicker-square to the date picker wrapper.
Design System