Lightweight and mobile friendly Vue date time picker

Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen sizes and simplicity of configuration. Has no dependencies on css frameworks or date libraries. Weighs less then 5KB.
vue-date-time-picker



Install

Install Vue date time picker via NPM

npm install vue-date-pick

HTML

Create sample date picker template

<template>
    <date-pick v-model="date"></date-pick>
</template>

CSS

Vue Date pick colors can be adjusted with following selectors if you are using library css file directly (vue-date-pick/dist/vueDatePick.css)

.vdpArrowPrev:after {
    border-right-color: #cc99cd;
}
 
.vdpArrowNext:after {
    border-left-color: #cc99cd;
}
 
.vdpCell.selectable:hover .vdpCellContent,
.vdpCell.selected .vdpCellContent {
    background: #cc99cd;
}
 
.vdpCell.today {
    color: #cc99cd;
}
 
.vdpTimeUnit > input:hover,
.vdpTimeUnit > input:focus {
    border-bottom-color: #cc99cd;
}



JS

Import and run plugin

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

Following props to are used to localize your date pick instance:

nextMonthCaption: {type: String, default: 'Next month'},
prevMonthCaption: {type: String, default: 'Previous month'},
setTimeCaption: {type: String, default: 'Set time:'},
weekdays: {
    type: Array,
    default: () => ([
        'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
    ])
},
months: {
    type: Array,
    default: () => ([
        'January', 'February', 'March', 'April',
        'May', 'June', 'July', 'August',
        'September', 'October', 'November', 'December'
    ])
}




List of all props available on vue date pick component:

value: {type: String, default: ''},
format: {type: String, default: 'YYYY-MM-DD'},
displayFormat: {type: String},
hasInputElement: {type: Boolean, default: true},
inputAttributes: {type: Object},
selectableYearRange: {type: Number, default: 40},
parseDate: {type: Function},
formatDate: {type: Function},
pickTime: {type: Boolean, default: false},
pickMinutes: {type: Boolean, default: true},
pickSeconds: {type: Boolean, default: false},
isDateDisabled: {type: Function, default: () => false},
nextMonthCaption: {type: String, default: 'Next month'},
prevMonthCaption: {type: String, default: 'Previous month'},
setTimeCaption: {type: String, default: 'Set time:'},
mobileBreakpointWidth: {type: Number, default: 500},
weekdays: {
    type: Array,
    default: () => ([
        'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
    ])
},
months: {
    type: Array,
    default: () => ([
        'January', 'February', 'March', 'April',
        'May', 'June', 'July', 'August',
        'September', 'October', 'November', 'December'
    ])
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by dbrekalo. Visit their official github repository for more information and follow for future updates.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.