vue2-datepickers

A Datepicker Component For Vue2

Forked from vue2-datepicker

Improved Features

• Timezone is supported. Date will be shown based on the timezone provided in props.
• Masking is done from the format given.
• By Default Picker will open in Current Month. This can be changed with 'defaultDate' prop.
• Bug Fix - On user input PM string can be given for date time

Demo

Install

$ npm install vue2-datepicker-updated-v2 --save

Usage

<script>
import DatePicker from 'vue2-datepicker-updated-v2'

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 | | defaultDate | Date | new Date() | if given, then picker will open in the respective date's month. |

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