Vue-idatepicker NPM

Vue-idatepicker

Vue datepicker component. Compatible with Vue 2.x

Requirements

Vue.js ^2.0.0

Example

Screenshot

Usage

<template>
  <datepicker :date="date" :required="true" :readonly="false" @datechange="doSomething">
    <i class="my-icon" />
  </datepicker>
</template>

<script>
import Datepicker from 'vue-idatepicker'

export default {
  components: {
    Datepicker
  },
  data () {
    return {
      datepickerOptions: {
        emptyDay: 'Day',
        emptyMonth: 'Month',
        emptyYear: 'Year',
        clear: 'Clear date',
        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        startDate: new Date(1950, 5, 5),
        finishDate: new Date (2050, 5, 5),
        styles: {
          pickerWidth: '90%',
          pickerShadow: '3px 4px 18px 0px rgba(115, 115, 115, 0.6)',
          clearColor: 'blue',
          selectedBackground: 'blue',
          selectedColor: 'white',
          disabledColor: 'gray',
          placeholderColor: 'gray',
          textColor: 'black'
        }
      }
    }
  },
  methods: {
    doSomething (err, date) {
      if (err) {
        // your validation messages
      } else {
        // do something with date
      }
    }
  }
})
</script>

Available props

Prop	Type	Default	Description
date	Number		Date value in seconds elapsed since 1 January 1970 00:00:00 UTC
readonly	Boolean		Do not show picker, date only
required	Boolean	false	To show asterisk
options	Object		Datepicker options
options.emptyDay	String	'day'	Translation for day
options.emptyMonth	String	'month'	Translation for month
options.emptyYear	String	'year'	Translation for year
options.clear	String	'clear'	Translation for clear button
options.months	Array		Translation for month names
options.startDate	Date	new Date(1897, 0, 1)	Min date
options.finishDate	Date	new Date()	Max date
options.styles	Object		Styles for some inner parts
options.styles.pickerWidth	String	'100%'	Width of picker
options.styles.pickerShadow	String	null	Shadow of picker
options.styles.clearColor	String	'#358ed7'	Color of clear button
options.styles.selectedBackground	String	'#358ed7'	Background color of selected item
options.styles.selectedColor	String	'#fff'	Color of selected item
options.styles.disabledColor	String	'gray'	Color of disabled item
options.styles.placeholderColor	String	'gray'	Color of stub elements
options.styles.textColor	String	'#1b212b'	Color of other text

Available events

Event	Output	Description
datechange	Object/null, Date/null	Emits on outside click with two arguments - error and result.

Error Object

error = {
  day: Boolean,
  month: Boolean,
  year: Boolean
}

Slots

There is one default slot, where you can place icons, validations or any additional html

License

The MIT License

vue datepicker vue-datepicker date-picker

@everything-registry/sub-chunk-3082 @infinitebrahmanuniverse/nolb-vue-i

1.0.0

8 years ago