DatePicker

A lightweight & configurable date picker.

Example

Use v-model to bind the selected date.

SunMonTueWedThuFriSat


<template>
  <section>
    <date-picker v-model="date"/>
    <br/>
    <alert type="info" v-show="date">You selected <b>{{date}}</b>.</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    }
  }
</script>
<!-- date-picker-example.vue -->

Formats

You can use any format you like. For example:

  • yyyy-M-d
  • yyyy-MM-dd
  • yyyy-MMM-dd
  • yyyy-MMMM-dd
  • yyyy/MM/dd
  • MM/dd/yyyy
  • yyyy, MM, dd
  • ...

Note that some browsers (e.g. IE) might not support all of these formats.

If you need a special format that not supported by Date.parse, consider using date-parser option to override it.

SunMonTueWedThuFriSat


<template>
  <section>
    <date-picker v-model="date" format="yyyy/MMMM/dd"/>
    <br/>
    <alert type="info" v-show="date">You selected <b>{{date}}</b>.</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    }
  }
</script>
<!-- date-picker-formats.vue -->

Buttons

Use today-btn and clear-btn to toggle visible of them.

SunMonTueWedThuFriSat
<template>
  <date-picker v-model="date" :today-btn="false" :clear-btn="false"/>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    }
  }
</script>
<!-- date-picker-without-buttons.vue -->

Range limit

Example that limit date range from 2018-01-01 to 2019-01-01:

SunMonTueWedThuFriSat

<template>
  <date-picker v-model="date" limit-from="2018-01-01" limit-to="2019-01-01"/>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    }
  }
</script>
<!-- date-picker-range-limit.vue -->

Week starts

Change the starting day of the week. Support 0 (Sunday) ~ 6 (Saturday).

MonTueWedThuFriSatSun

<template>
  <date-picker v-model="date" :week-starts-with="1"/>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    }
  }
</script>
<!-- date-picker-week-starts.vue -->

Week numbers

SunMonTueWedThuFriSat
43
44
45
46
47
48


<template>
  <section>
    <date-picker v-model="date" week-numbers/>
    <br/>
    <alert type="info" v-show="date">You selected <b>{{date}}</b>.</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    }
  }
</script>
<!-- date-picker-week-numbers.vue -->

With dropdown

<template>
  <form class="form-inline">
    <dropdown class="form-group">
      <div class="input-group">
        <input class="form-control" type="text" v-model="date">
        <div class="input-group-btn">
          <btn class="dropdown-toggle"><i class="glyphicon glyphicon-calendar"></i></btn>
        </div>
      </div>
      <template slot="dropdown">
        <li>
          <date-picker v-model="date"/>
        </li>
      </template>
    </dropdown>
  </form>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    }
  }
</script>
<!-- date-picker-dropdown-example.vue -->

Custom date classes

Use date-class to apply custom classes to each date button, which should be an function that:

  • takes the date of button as param.
  • returns the class(es).

See below example for detail usage, which has all sunday highlighted:

SunMonTueWedThuFriSat

<template>
  <date-picker v-model="date" :date-class="dateClass"/>
</template>
<script>
  export default {
    data () {
      return {
        date: null
      }
    },
    methods: {
      dateClass (date) {
        return date.getDay() === 0 ? 'btn-sunday' : ''
      }
    }
  }
</script>
<style>
 .btn-sunday.btn-default {background-color: #ccc}
</style>
<!-- date-picker-custom-date-classes.vue -->

Custom icons

SunMonTueWedThuFriSat

<template>
  <section>
    <date-picker icon-control-left="glyphicon glyphicon-triangle-left" icon-control-right="glyphicon glyphicon-triangle-right"/>
  </section>
</template>
<!-- date-picker-icons-example.vue -->

Custom locale

Pass a locale object to locale for custom translations of month and weekday names, clear-btn and today-btn texts.

V.H.K.Sze.Cs.P.Szo.

<template>
  <section>
    <date-picker :locale="localeHU" />
  </section>
</template>
<script>
  import localeHU from '../../../src/locale/lang/hu-HU'
  export default {
    data () {
      return {
        localeHU
      }
    }
  }
</script>
<!-- date-picker-locale.vue -->

API Reference

DatePicker

Props

Name Type Default Required Description
v-model The selected date.
width Number 270 The date-picker's width in px.
today-btn Boolean true Show / hide the today button.
clear-btn Boolean true Show / hide the clear button.
format String yyyy-MM-dd The date format.
close-on-selected Boolean true Close the date-picker dropdown after date selected.
limit-from Anything that can convert to a valid Date object. E.g. 2017-01-01 or new Date().
limit-to Same as limit-from.
initial-view String d Open the date-picker with specify view (one of d / m / y) on initial. Only works if the v-model is empty.
week-starts-with Number 0 Starting day of the week. Support 0 (Sunday) ~ 6 (Saturday).
week-numbers Boolean false Show week numbers of year.
date-parser Function Date.parse Use this prop to replace the Date.parse call inside the component. Useful when The formatted String can not be correctly parsed to Date type by Date.parse (e.g. dd-MM-yyyy). For example: dateParser (value) {return moment(value, 'DD-MM-YYYY').toDate().getTime()}
date-class Function The custom class callback function for each date. See above example section for details.
year-month-formatter Function The formatter function of year month label string on top of date view, with 2 params year and month (0-based), with the formatted string returned.
icon-control-left String glyphicon glyphicon-chevron-left The arrow icon shown inside the previous button.
icon-control-right String glyphicon glyphicon-chevron-right The arrow icon shown inside the next button.
locale Object (0.24.0+) The locale used for translating month and weekday names, clear-btn and today-btn texts.

Caught a mistake or want to contribute to the documentation? Edit this page on Github!