@reciprocity/date-picker v0.6.2

Date Picker

A datepicker / datetimepicker component. This this basically a wrapper of vue2-datepicker

Installation

npm install @reciprocity/date-picker

or

yarn add @reciprocity/date-picker

Usage

This component is meant to be used as an ES module, so you can import it using the ES6 import syntax.

After importing you can just register it with Vue. Eg:

app.vue

<template>
  <date-picker v-model="time" valueType="format"></date-picker>
</template>
<script>
import DatePicker from '@reciprocity/date-picker';

export default Vue.extend({
  name: 'My App',
  data: {
    time: null
  },
  components: {
    DatePicker
  }
};
</script>

Props

Token

custom format

The format accepts an object to customize formatting.

<date-picker :format="formatter" />

import { format, parse as dateParse } from 'date-fns';
// ...
data() {
  return {
    // Use date-fns instead of the default
    formatter: {
      // Date to String
      stringify: date => {
        return date ? format(date, this.currentFormat) : '';
      },
      // String to Date
      parse: value => {
        return value ? dateParse(value) : null;
      },
    }
  }
}

value-type

set the format of binding value

shortcuts

The shortcuts for the range picker

[
  { text: 'today', onClick: () => new Date() },
  {
    text: 'Yesterday',
    onClick: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
];

time-picker-options

Set fixed time list to select;

{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }

Default Locale

{
  // the locale of formatting and parsing function
  formatLocale: {
    // MMMM
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    // MMM
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    // dddd
    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    // ddd
    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    // dd
    weekdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    // first day of week
    firstDayOfWeek: 0,
    // first week contains January 1st.
    firstWeekContainsDate: 1,
    // format 'a', 'A'
    meridiem: (h: number, _: number, isLowercase: boolean) {
      const word = h < 12 ? 'AM' : 'PM';
      return isLowercase ? word.toLocaleLowerCase() : word;
    },
    // parse ampm
    meridiemParse: /[ap]\.?m?\.?/i;
    // parse ampm
    isPM: (input: string) {
      return `${input}`.toLowerCase().charAt(0) === 'p';
    }
  },
  // the calendar header, default formatLocale.weekdaysMin
  days: [],
  // the calendar months, default formatLocale.monthsShort
  months: [],
  // the calendar title of year
  yearFormat: 'YYYY',
  // the calendar title of month
  monthFormat: 'MMMM',
  // the calendar title of month before year
  monthBeforeYear: false,
}

Events

Slots