Elegant Date Picker For Vue

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
}

Preview:

Elegant Date Picker For Vue

Changelog:

v2.3.0 & 3.1.1 (11/20/2021)

  • reset : emit event for resetDate method.

08/09/2021

  • Vue 3 Support has been added

v2.1.0 (07/12/2021)

  • Clear date button has been added.

v2.0.3 (06/21/2021)

  • Bugfix

v2.0.0 (06/19/2021)

  • Bugfix

Download Details:

Author: edisdev

Live Demo: https://edisdev.github.io/vue-datepicker-ui/

Download Link: https://github.com/edisdev/vue-datepicker-ui/archive/master.zip

Official Website: https://github.com/edisdev/vue-datepicker-ui

Install & Download:

# Vue 2
$ npm i vue-datepicker-ui

# Vue 3
$ npm i [email protected]

Add Comment