Vue date pick

# Examples

# Calendar widget

Vue date pick can be used in calendar widget form.

MonTueWedThuFriSatSun
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
Show code 
<template>
    <date-pick
        v-model="date"
        :hasInputElement="false"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';

export default {
    components: {DatePick},
    data: () => ({
        date: '2019-02-12'
    })
};
</script>

# Date format

Simple date picker with custom format (default is 'YYYY-MM-DD'):

Show code 
<template>
    <date-pick
        v-model="date"
        :format="'YYYY.MM.DD'"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
export default {
    components: {DatePick},
    data: () => ({
        date: '2019.01.01'
    })
};
</script>

# Display format

Use display format prop when UI date format is different from raw data format.

Show code 
<template>
    <date-pick
        v-model="date"
        :displayFormat="'DD.MM.YYYY'"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
export default {
    components: {DatePick},
    data: () => ({
        date: '2019-01-01'
    })
};
</script>

# Custom date parser

Vue date pick comes with simple date parser. If you need to work with complex date formats feel free to inject implementation of your choice.

Show code 
<template>
    <date-pick
        v-model="date"
        :format="format"
        :parseDate="parseDate"
        :formatDate="formatDate"
        :inputAttributes="{size: 32}"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
import fecha from 'fecha';

export default {
    components: {DatePick},
    data: () => ({
        format: 'dddd MMMM Do, YYYY',
        date: fecha.format(new Date(), 'dddd MMMM Do, YYYY')
    }),
    methods: {
        parseDate(dateString, format) {
            return fecha.parse(dateString, format);
        },
        formatDate(dateObj, format) {
            return fecha.format(dateObj, format);
        }
    }
};
</script>

# Date time picker

Date picker with controls for hours and minutes:

Show code 
<template>
    <date-pick
        v-model="date"
        :pickTime="true"
        :format="'YYYY-MM-DD HH:mm'"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
export default {
    components: {DatePick},
    data: () => ({
        date: '2019-01-01 14:30'
    })
};
</script>

# Date time picker (AM/PM)

Date time picker with hours displayed using 12 hour clock:

Show code 
<template>
    <date-pick
        v-model="date"
        :pickTime="true"
        :use12HourClock="true"
        :format="'YYYY-MM-DD HH:mm'"
        :displayFormat="'YYYY.MM.DD H:mm A'"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
export default {
    components: {DatePick},
    data: () => ({
        date: '2019-01-01 14:30'
    })
};
</script>

# Custom start period

Open calendar UI with custom start month / year period:

Show code 
<template>
    <date-pick
        :startPeriod="{month: 0, year: 2020}}"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
export default {
    components: {DatePick}
};
</script>

# Custom content with slot

Replace default input controls with custom slot content:

Show code 
<template>
    <date-pick v-model="date">
        <template v-slot:default="{toggle, inputValue}">
            <button @click="toggle">
                 {{ inputValue || 'Toggle calendar' }}
            </button>
        </template>
        <template v-slot:cellContent="{item}">
            <div class="vdpCellContent">
                <strong>{{ item.date.getDate() }}</strong>
            </div>
        </template>
    </date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
export default {
    components: {DatePick},
    data: () => ({
        date: ''
    })
};
</script>

# Disabling dates

Set "isDateDisabled" function as component prop to disable dates:

Show code 
<template>
    <date-pick
        v-model="date"
        :isDateDisabled="isFutureDate"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';
export default {
    components: {DatePick},
    data: () => ({
        date: ''
    }),
    methods: {
        isFutureDate(date) {
            const currentDate = new Date();
            return date > currentDate;
        }
    }
};
</script>

# Disabling manual input

Manual user input can be disabled by setting input readonly attribute via "inputAttributes" prop.

Show code 
<template>
    <date-pick
        v-model="date"
        :inputAttributes="{readonly: true}"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';

export default {
    components: {DatePick},
    data: () => ({
        date: '2018-12-29'
    })
};
</script>

# Disable editing and picker UI

Disable input editing and calendar UI by setting "editable" prop to false.

Show code 
<template>
    <date-pick
        v-model="date"
        :editable="false"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';

export default {
    components: {DatePick},
    data: () => ({
        date: '2018-12-29'
    })
};
</script>

# Start week on Sunday

Sunday can be set as the first day of the week via "startWeekOnSunday" prop.

Show code 
<template>
    <date-pick
        v-model="date"
        :startWeekOnSunday="true"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';

export default {
    components: {DatePick},
    data: () => ({
        date: '2019-01-01'
    })
};
</script>

# Change selectable years

Dropdown for selecteble years can be customized via selectableYearRange prop (default value is 40 years from and after current year).

Show code 
<template>
    <date-pick
        v-model="date"
        :selectableYearRange="{from: 1985, to: 2020}"
    ></date-pick>
</template>

<script>
import DatePick from 'vue-date-pick';

export default {
    components: {DatePick},
    data: () => ({
        date: '2019-01-01'
    })
};
</script>

← Localization →