DatePicker 🔗

A lightweight & configurable date picker.

Example 🔗

Use v-model to bind the selected date.

<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.

<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.

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

<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).

<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 🔗

<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 the first param.
• (0.33.0+) also with current month and year showing of the picker in the second param.
• returns the class(es).

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

<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 🔗

<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.

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

API Reference 🔗

DatePicker 🔗

Props 🔗