Date picker

Use when

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

With inputs

An input with a simple dropdown/modal for selecting a date. Follow the code example form the right panel to get this date picker.

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 form the right panel to get this date picker.

Inline date picker - range selection

This date picker can also be shown inline with the inline prop, input is removed. For this exacple youy can select a range of dates. Follow the code example form the right panel to get this date picker.

				
<!-- With input field - Example 1 -->
<div id="app">
   <section>
      <b-field class="form-group" label="Select a date" label-for="datepicker-exemple1">
         <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,
            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 datepicker - only one selection - Example 2 -->
<div id="app2">
   <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 example2 = {
   data() {
      const today = new Date()
         return {
            date: undefined,
            locale: undefined,
            month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
            day_names: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
         }
      }
   }
const app2 = new Vue(example2)		   
app2.$mount('#app2')
</script>


<!-- Inline datepicker - range selection - Example 3 -->
<div id="app3">
   <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 example3 = {
   data() {
      const today = new Date()
         return {
            date: undefined,
            locale: undefined,
            month_names: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
            day_names: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
         }
      }
   }
const app3 = new Vue(example3)		   
app3.$mount('#app3')
</script>