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

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

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

Donate

If you find this project useful, you can buy author a glass of juice

PayPal | AliPay | WeChat

License

MIT

Copyright (c) 2017-present xiemengxiong