vue2-datepicker-mask

A Datepicker Component For Vue2. Forked from vue2-datepicker
1,801
vue datepicker
Install
npm install vue2-datepicker-mask
Latest Version:2.0.2
Vue:2
License:MIT
Last Updated:Oct 15, 2018
Links: GitHub  ·  npm
Maintainer: ramya-palaniswami

vue2-datepicker

A Datepicker Component For Vue2

Demo

Forked from vue2-datepicker Masking is done from the format given.

image

Install

$ npm install vue2-datepicker-mask --save

Usage

<script>
import DatePicker from 'vue2-datepicker'

export default {
  components: { DatePicker },
  data() {
    return {
      time1: '',
      time2: '',
      shortcuts: [
        {
          text: 'Today',
          start: new Date(),
          end: new Date()
        }
      ]
    }
  }
}

</script>

<template>
  <div>
    <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
    <date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
  </div>
</template>

Attributes

Prop Type Default Description
type String 'date' select datepicker or datetimepicker(date/datetime)
range Boolean false if true, the type is daterange or datetimerange
format String yyyy-MM-dd Date formatting string
custom-formatter function null custom Date display
lang String/Object zh Translation (en/zh/es/pt-br/fr/ru/de/it/cs)(custom)
confirm Boolean false if true, need click the button to change the value
disabled Boolean false Disable the component
editable Boolean false if true, user can type it(only the range is false)
placeholder String input placeholder text
width String/Number 210 input size
disabled-days Array [] Days in YYYY-MM-DD format to disable
not-before String/Date '' Disable all dates before new Date(not-before)
not-after String/Date '' Disable all dates after new Date(not-after)
shortcuts Boolean/Array true the shortcuts for the range picker
time-picker-options Object {} set timePickerOptions(start, step, end)
minute-step Number 0 if > 0 don't show the second picker(0 - 60)
first-day-of-week Number 7 set the first day of week (1-7)
input-class String 'mx-input' the input class name
confirm-text String 'OK' the default text to display on confirm button
range-separator String '~' the range separator text
lang
  • String (en/zh/es/pt-br/fr/ru/de/it/cs)
  • Object
{
  days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
  placeholder: {
    date: 'Select Date',
    dateRange: 'Select Date Range'
  }
}
shortcuts
  • true - show the default shortcuts
  • false - hide the shortcuts
  • Object[] - custom shortcuts, [{text, start, end}]
Prop Type Description
text String Text
start Date Start Date
end Date End Date
time-picker-options
  • Object[] - custom time-picker, [{start, step, end}]
Prop Type Description
start String startTime (eg '00:00')
step String stepTime (eg '00:30')
end String endTime (eg '23:30')

Events

Name Description Callback Arguments
change When user select date the currentValue
confirm When user click 'OK' button the currentValue

License

MIT

Copyright (c) 2017-present xiemengxiong

Related Packages

@schlechtwetterfront/vue-datepicker

A customizable datepicker for Vue 3

5,042 2
datepicker vue
vue2-datepicker-improved

A Datepicker Component For Vue2. Forked from vue2-datepicker

711 0
datepicker vue
vue-datepicker

calendar and datepicker component with material design for Vue.js

131,932 694
datepicker vue vue-datepicker
vue-date

datepicker component for Vue.js

25,498 153
datepicker vue date
vue-datepicker-local

A datepicker for Vue.js

16,932 295
datepicker vue components

Version History

Version Released Vue License
2.0.2 ^2.2.1 MIT
2.0.1 ^2.2.1 MIT
1.9.9 ^2.2.1 MIT
1.9.8 ^2.2.1 MIT
1.9.7 ^2.2.1 MIT