Elegant Date Picker For Vue

Install & Download:

# Vue 2
$ npm i vue-datepicker-ui
# Vue 3
$ npm i vue-datepicker-ui@vue3

Description:

Just another date & date range picker UI component for Vue 3 and Vue 2 apps.

More Features:

Multiple languages.
Custom date format.
Custom styles.

How to use it:

1. Import and register the date picker component.

// Vue 2
import VueDatepickerUi from 'vue-datepicker-ui'
import 'vue-datepicker-ui/lib/vuedatepickerui.css';
// Register
Vue.component('Datepicker', VueDatepickerUi)
// Or locally
export default {
  components: {
    Datepicker: VueDatepickerUi
  }
}

// Vue 3
import VueDatepickerUi from 'vue-datepicker-ui'
import 'vue-datepicker-ui/lib/vuedatepickerui.css';
// Register
// Or locally
export default {
  components: {
    Datepicker: VueDatepickerUi
  }
}

2. Add the date picker component to the app.

<template>
  <Datepicker ...props>
</template>

3. Available date picker props.

value: {},
textFormat: {
  type: String,
  default: 'short'
},
dateFormat: {
  type: Object,
  default: () => {
    return { day: '2-digit', month: 'short', year: 'numeric' }
  }
},
format: {
  type: String,
  default: ''
},
rangeSeperator: {
  type: String,
  default: '~'
},
position: {
  type: String,
  default: 'left'
},
range: {
  type: Boolean,
  default: false
},
lang: {
  type: String,
  default: 'tr'
},
inputClass: {
  type: String,
  default: ''
},
firstDayOfWeek: {
  type: String,
  validator: (val) => ['monday', 'sunday'].indexOf(val) > -1,
  default: 'monday'
},
disabledStartDate: {
  type: Object,
  default () {
    return {
      from: null,
      to: null
    }
  }
},
disabledEndDate: {
  type: Object,
  default () {
    return {
      from: null,
      to: null
    }
  }
},
disabled: {
  type: Boolean,
  default: false
},
placeholder: {
  type: String,
  default: 'Select Date'
},
circle: {
  type: Boolean,
  default: false
},
showClearButton: {
  type: Boolean,
  default: false
},
showPickerInital: {
  type: Boolean,
  default: false
}