bruian/vue2-datepicker

A datepicker / datetimepicker component for Vue2

vue2-datepicker

中文版

A Datepicker Component For Vue2

Demo

https://mengxiong10.github.io/vue2-datepicker/demo/index.html

Install

$ npm install vue2-datepicker --save

Usage

<script>
import DatePicker from 'vue2-datepicker'

export default {
  components: { DatePicker },
  data() {
    return {
      time1: '',
      time2: '',
      time3: '',
      // custom lang
      lang: {
        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'
        }
      },
      // custom range shortcuts
      shortcuts: [
        {
          text: 'Today',
          onClick: () => {
            this.time3 = [ new Date(), new Date() ]
          }
        }
      ],
      timePickerOptions:{
        start: '00:00',
        step: '00:30',
        end: '23:30'
      }
    }
  }
}
</script>

<template>
  <div>
    <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
    <date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
    <date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
    <date-picker v-model="value" :lang="lang"></date-picker>
  </div>
</template>

Props

Prop	Description	Type	Default
type	select date type	'date' | 'datetime' | 'year' | 'month' | 'time'	'date'
range	if true, the type is daterange or datetimerange	boolean	false
format	format the Date. The parsing tokens are similar to the moment.js	token | object	'YYYY-MM-DD'
value-type	type of binding value. If not specified, the binding value will be a Date object	value-type	'date'
lang	Translation	lang	'zh'
clearable	if false, don't show the clear icon	boolean	true
confirm	if true, need click the button to change the value	boolean	false
editable	if false, user cann't type it	boolean	true
disabled	Disable the component	boolean	false
placeholder	input placeholder text	string	—
width	input size	string|number	210
append-to-body	append the popup to body	boolean	false
default-value	default date of the calendar	Date	new Date()
popupStyle	popup style(override the top, left style)	object	—
not-before	Disable all dates before new Date(not-before)	string|Date	''
not-after	Disable all dates after new Date(not-after)	string|Date	''
disabled-days	Disable Days	(date) => boolean	-
shortcuts	the shortcuts for the range picker	shortcuts	true
time-picker-options	custom time-picker	time-picker-options	null
minute-step	if > 0 don't show the second picker	0 - 60	0
first-day-of-week	set the first day of week	1 - 7	7
input-class	the input class name	string	'mx-input'
input-attr	the input attr(eg: { required: true, id: 'input'})	object	—
confirm-text	the default text to display on confirm button	string	'OK'
range-separator	the range separator text	string	'~'
date-format	format the time header and tooltip	string	''

value-type

set the format of binding value

Value	Description
date	binding value will be a Date object
timestamp	binding value will be a timestamp number
format	binding value will be the format string

Advanced: You can also customize objects to implement two functions.

{
  value2date: (value: any) => Date,  // transform the binding value to calendar Date Object
  date2value: (date: Date) => any   // transform the calendar Date Object to binding value
}

lang

Type
'en'|'zh'|'es'|'pt-br'|'fr'|'ru'|'de'|'it'|'cs'
{ days: string[]; months: string[]; picker: string[]; placeholder: { date: string; dateRange: string } }

shortcuts

the shortcuts for the range picker

Value	Description
true	show the default shortcuts
false	hide the defaualt shortcuts
[{text: string, onClick: () => any }]	custom shortcuts

time-picker-options

custom time-picker

Type
{start: '00:00', step:'00:30' , end: '23:30'}
() => Array<{ label: string; values: { hours: number; minutes: number } }>

Events

Name	Description	Callback Arguments
input	When the value change(v-model event)	the currentValue
change	When the value change(same as input)	the currentValue
confirm	When click 'confirm' button	the currentValue
clear	When click 'clear' button
input-error	When user type a invalid Date	the input text
panel-change	When change the panel view(eg: from year to month view)	panel, oldPanel
calendar-change	When calendar view year or month change	now(Date), oldNow(Date)
focus	When input focus
blur	When input blur

panel

Value	Description
NONE	when panel is closed
DATE	when panel is date
YEAR	when panel is year
MONTH	when panel is month
TIME	when panel is time

Slots

Name	Description
calendar-icon	custom the calender icon
header	popup header
footer	popup footer

ChangeLog

CHANGELOG

License

MIT

Copyright (c) 2017-present xiemengxiong