Lightweight And Mobile Friendly Date Time Picker – vue-date-pick

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 than 5KB.

How to use it:

1. Import the date picker.

import DatePick from 'vue-date-pick';
import 'vue-date-pick/dist/vueDatePick.css';

2. Add the date picker component to the template.

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

export default {
  components: {DatePick},
  data: () => ({
    date: '2022-01-01'
  })
};

3. Available props.

value: {
  type: String,
  default: ''
},
format: {
  type: String,
  default: 'YYYY-MM-DD'
},
displayFormat: {
  type: String
},
editable: {
  type: Boolean,
  default: true
},
hasInputElement: {
  type: Boolean,
  default: true
},
inputAttributes: {
  type: Object
},
selectableYearRange: {
  type: [Number, Object, Function],
  default: 40
},
startPeriod: {
  type: Object
},
parseDate: {
  type: Function
},
formatDate: {
  type: Function
},
pickTime: {
  type: Boolean,
  default: false
},
pickMinutes: {
  type: Boolean,
  default: true
},
pickSeconds: {
  type: Boolean,
  default: false
},
use12HourClock: {
  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'
  ])
},
startWeekOnSunday: {
  type: Boolean,
  default: false
}

Preview:

Changelog:

v1.5.1 (09/22/2022)

• Update

v1.5.0 (09/20/2022)

• Add support for cell content customisation via slot

v1.4.1 (11/26/2020)

• Add api to set custom content via default slot
• Add 12 hour clock time picker

Download Details:

Author: dbrekalo

Live Demo: https://dbrekalo.github.io/vue-date-pick/examples.html

Download Link: https://github.com/dbrekalo/vue-date-pick/archive/master.zip

Official Website: https://github.com/dbrekalo/vue-date-pick

Install & Download:

# NPM
$ npm install vue-date-pick --save