vue-pick-a-date v1.0.4

Vue Pick a Date

A material design date picker component for Vue. Built on top of vue-md-date-picker as the original package is, unfortunately, not in development for quite a while now. The package now accepts the translations and there's option to change Sunday-to-Saturday to Monday-to-Sunday

Contents

• Installing
• Examples
• Formatting Selected Date
• API

Installing

Using npm: npm install vue-pick-a-date Using yarn: yarn add vue-pick-a-date

In order to use the plugin after installation you need to import it.

import DatePicker from 'vue-pick-a-date'

You can also install vue-pick-a-date globally:

import Vue from 'vue';
import DatePicker from 'vue-pick-a-date';

Vue.use(DatePicker);

Examples

The most common use case

<date-picker @close="show = false"
             v-if="show"
             v-model="date"></date-picker>

Note that there is a v-if directive and a @close event. This is because the date picker allows you to choose when it is displayed, and how to handle closing it.

Setting a min date to choose from

<date-picker min="2017-8-16"
             @close="show = false"
             v-if="show"
             v-model="date"></date-picker>

Setting a max date to choose from

<date-picker max="2017-8-24"
             @close="show = false"
             v-if="show"
             v-model="date"></date-picker>

Setting a range of dates to choose from

<date-picker min="2017-8-16"
             max="2017-8-24"
             @close="show = false"
             v-if="show"
             v-model="date"></date-picker>

You may also specify a color to change the theme of the date picker

<date-picker color="#F44336"
             @close="show = false"
             v-if="show"
             v-model="date"></date-picker>

There is also a provided transition if you want to fade the date picker in

<transition name="calendar-fade">
  <date-picker @close="show = false"
               v-if="show" 
               v-model="date"></date-picker>
</transition>

In case you need to provide internationalization, you can pass your own translations object.

const translations = {
    dayMap: {
        0: 'Mon',
        1: 'Die',
        2: 'Mitt',
        3: 'Don',
        4: 'Fre',
        5: 'Sam',
        6: 'Son'
    },
    shortDayMap: [
        'M',
        'T',
        'W',
        'T',
        'F',
        'S',
        'S',
    ],
    monthMap: {
        0: 'Januar',
        1: 'Februar',
        2: 'März',
        3: 'April',
        4: 'Mai',
        5: 'Juni',
        6: 'Juli',
        7: 'August',
        8: 'September',
        9: 'Oktober',
        10: 'November',
        11: 'Dezember'
    },
    cancelButtonText: 'Stornieren',
    submitButtonText: 'Ok'
};

<date-picker @close="show = false"
             v-if="show"
             v-model="date"
             :translations="translations"></date-picker>

You can specify the week days interval format Sun-to-Sat (default) or Mon-To-Sun

<date-picker @close="show = false"
             v-if="show"
             v-model="date"
             week-format="Mon-To-Sun"
             :translations="translations"></date-picker>

Formatting

To format the date picker's value, you may use the :format prop. The format prop takes a reference to a function; this function receives the date picker's date value (e.g. 2016-4-19) and may format it however you wish

<date-picker :format="formatDate"
             @close="show = false"
             v-if="show"
             v-model="date"></date-picker>

In your component's methods...

formatDate (date) {
  return moment(date).format('LL')
}

In the above example, if a user selected "2017-8-29" as the date, the date value would be "August 29, 2017".

API

Props

Events