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

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.

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]"
            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]"
            :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"
         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>