Date picker
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
On this page you can find multiple types of date picker VUE.js component and the style variants:
- Standard date picker with input and dropdown selector
- Inline date picker - single selection
- Inline date picker - range selection
- Date picker with range selection and input
- Month-picker and variants for standard datepicker :
- Date picker with fill cell and square borders for the calendar cells
- Date picker with only stroke cell and round borders for the calendar cells
- Date picker with only stroke cell and square borders for the calendar cells
With input
An input with a simple dropdown/modal for selecting a date. Follow the code examplefrom below to get this date picker.
<div id="app">
<section>
<b-field class="form-group" label="Select a date" label-for="datepicker-exemple">
<b-datepicker
id="datepicker-exemple1"
v-model="date"
ref="datepicker"
placeholder="Select a date"
icon="calendar"
:years-range="[-100, 100]"
:first-day-of-week="1"
:nearby-selectable-month-days=true
:month-names="month_names"
:day-names="day_names"
:show-week-number="showWeekNumber"
:unselectable-days-of-week="[0, 6]"
:close-on-click="false"
editable
expanded>
<button class="btn btn-today"
@click="date=new Date()">
Today
</button>
<button class="btn btn-clear"
@click="date=null">
Clear
</button>
</b-datepicker>
</b-field>
</section>
</div>
<script>
const example = {
data() {
const today = new Date()
return {
date: undefined,
locale: undefined, // other options: 'en-GB' (for dd/mm/yyyy), 'en-CA' (for yyyy/mm/dd), 'en-US' (for mm/dd/yyyy), etc.
month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
day_names: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
}
}
const app = new Vue(example)
app.$mount('#app')
</script>
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.
<div id="app">
<b-datepicker
v-model="date"
inline
:years-range="[-100, 100]"
:first-day-of-week="1"
:focused-date="date"
:nearby-selectable-month-days=true
:month-names="month_names"
:day-names="day_names"
:unselectable-days-of-week="[0, 6]"
:show-week-number="showWeekNumber">
</b-datepicker>
</div>
<script>
const example = {
data() {
const today = new Date()
return {
date: undefined,
locale: undefined, // other options: 'en-GB' (for dd/mm/yyyy), 'en-CA' (for yyyy/mm/dd), 'en-US' (for mm/dd/yyyy), etc.
month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
day_names: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
}
}
const app = new Vue(example)
app.$mount('#app')
</script>
Inline date picker - range selection
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.
<div id="app">
<b-datepicker
v-model="date"
inline
range
:years-range="[-100, 100]"
:first-day-of-week="1"
:focused-date="date"
:nearby-selectable-month-days=true
:month-names="month_names"
:day-names="day_names"
:unselectable-days-of-week="[0, 6]"
:show-week-number="showWeekNumber">
</b-datepicker>
</div>
<script>
const example = {
data() {
const today = new Date()
return {
date: undefined,
locale: undefined, // other options: 'en-GB' (for dd/mm/yyyy), 'en-CA' (for yyyy/mm/dd), 'en-US' (for mm/dd/yyyy), etc.
month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
day_names: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
}
}
const app = new Vue(example)
app.$mount('#app')
</script>
Date picker with range selection and input
For this example you can select a range of dates that will be displayed in the input. Follow the code example from below to get this date picker.
<div id="app">
<section>
<b-field class="form-group" label="Select a date" label-for="datepicker-exemple">
<b-datepicker
v-model="date"
ref="datepicker"
icon="calendar"
id="datepicker-exemple"
placeholder="Select a date"
range
expanded
editable
:years-range="[-100, 100]"
:first-day-of-week="1"
:focused-date="date"
: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>
<script>
const example = {
data() {
const today = new Date()
return {
date: undefined,
locale: undefined, // other options: 'en-GB' (for dd/mm/yyyy), 'en-CA' (for yyyy/mm/dd), 'en-US' (for mm/dd/yyyy), etc.
month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
day_names: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
}
}
const app = new Vue(example)
app.$mount('#app')
</script>
Month and year selection
<div id="app">
<b-field label="Select month and year" class="form-group month-picker" label-for="datepicker-exemple">
<b-datepicker
id="datepicker-exemple"
type="month"
editable
placeholder="Select month and year..."
:month-names="month_names"
:close-on-click="false"
icon="calendar"
</b-datepicker>
</b-field>
</div>
<script>
const example = {
data() {
const today = new Date()
return {
month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
}
}
}
const app = new Vue(example)
app.$mount('#app')
</script>
Date picker variants
Date picker with fill cell and square borders for the calendar cells
Add .datepicker-square
to the date picker wrapper.
<div id="app">
<b-field label="Select a date" class="form-group datepicker-square" label-for="datepicker-exemple">
<b-datepicker
...
</b-datepicker>
</b-field>
</div>
or
<div id="app">
<b-datepicker
class="datepicker-square"
...
</b-datepicker>
</div>
Date picker with only stroke cell and round borders for the calendar cells
Add .datepicker-stroke
to the date picker wrapper.
<div id="app">
<b-field label="Select a date" class="form-group datepicker-stroke" label-for="datepicker-exemple">
<b-datepicker
...
</b-datepicker>
</b-field>
</div>
or
<div id="app">
<b-datepicker
class="datepicker-stroke"
...
</b-datepicker>
</div>
Date picker with only stroke cell and square borders for the calendar cells
Add .datepicker-stroke
and .datepicker-square
to the date picker wrapper.
<div id="app">
<b-field label="Select a date" class="form-group datepicker-square datepicker-stroke" label-for="datepicker-exemple">
<b-datepicker
...
</b-datepicker>
</b-field>
</div>
or
<div id="app">
<b-datepicker
class="datepicker-square datepicker-stroke"
...
</b-datepicker>
</div>