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.
Install
Install Vue date time picker via NPM
npm install vue-date-pick |
HTML
Create sample date picker 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.
This awesome plugin is developed by dbrekalo. Visit their official github repository for more information and follow for future updates.
