Huizhen-datepicker NPM

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" valueType="format" :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
time-select-options	custom time-select	time-select-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`	''
icon-day	set the number of calendar icon	`string`\|`number`	''

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 } }>

time-select-options

custom time-select for columns

Type
{hours: 9, 10, 11, minutes: 10, 20, seconds: 10, 20 }

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