@dpa-id-components/ui-date-range-picker

UiDateRangePicker Vue 2.x date picker component based on the vue2-daterange-picker and dpa Design Kit

Installation

yarn add @dpa-id-components/ui-date-range-picker

Usage

<!-- SomeComponent.vue using UiDateRangePicker-->
<template>
  <ui-date-range-picker
    :internal-props="internalProps"
    v-model='dateRange'
  > 
    <ui-input slot="dateRangeSlot"
      :chevron="true"
      :value="formatDateRange(dateRange.startDate, dateRange.endDate)"
      :label="label"
      class="text-small"
    />
  </ui-date-range-picker>
</template>

<script>
  import UiDateRangePicker from "@dpa-id-components/ui-date-range-picker";
  import UiInput from "@dpa-id-components/ui-input.vue";
  import { format, parseISO } from "date-fns";

  export default {
    components: {
      UiAutocomplete,
      UiInput
    },
    data() {
      return {
        dateRange: {
          startDate: parseISO("2022-02-15T11:25:46.000Z"),
          endDate: parseISO("2022-02-19T11:25:46.000Z")
        },
        internalProps: {
          autoApply: true,
          appendToBody: true,
          showDropdowns: false,  
          opens: 'right',
          localeData: {
            direction: "ltr",
            format: "dd.mm.yyyy",
            separator: " – ",
            applyLabel: "Anwenden",
            cancelLabel: "Abbrechen",
            weekLabel: "W",
            customRangeLabel: "Custom Range",
            daysOfWeek: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
            monthNames: [
              "Jan",
              "Feb",
              "Mrz",
              "Apr",
              "Mai",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Okt",
              "Nov",
              "Dez"
            ],
            firstDay: 1
          },
          ranges: {
              "Heute": [],
              "Gestern": [],
              "Dieser Monat": [],
              "Dieses Jahr": [],
              "Letzter Monat": [],
              "Letztes Jahr": [],
              "Gesamte Zeit": [null, null]
          }
        }
      };
    },
   methods: {
    formatDateRange: (
      startDate,
      endDate
      ) => {
        const DATE_FORMAT_STR = "dd.MM.yyyy";
        if (!!startDate && !!endDate) {
          return `${format(startDate, DATE_FORMAT_STR)} – ${format(
            endDate,
            DATE_FORMAT_STR
          )}`;
        }
        return "";
      },
    },
  };
</script>

Demo

View a demo of <ui-date-range-picker> on Storybook

API

Props

| Name | Type | Default | Description | | --------------- | ----------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------| | label | String | "" | Text for the input's label | | internalProps | Object | {} | To bind all date range picker related props | | value | Object | {} | The input's value recieving the dateRange as object | | targetDate | Date | new Date()| Disable all dates until the targetDate

internalProps

| Name | Type | Default | Description | | --------------- | ----------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------| | autoApply | Boolean | false | Auto apply selected range. If false you need to click an apply button | | appendToBody | Boolean | false | Append the dropdown element to the end of the body and size/position it dynamically. Use it if you have overflow or z-index issues| | showDropdowns | Boolean | false | Show the dropdowns for month and year selection above the calendars | | localeData | Object | {} | Object containing locale data used by the picker. See example | | ranges | Object, Boolean | {}, false | Set this to false in order to hide the ranges selection. Otherwise it is an object with key/value. |

Events

| Name | Type | Description | | --------- |------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | update | value - json object containing the dates: {startDate, endDate} | Emitted when the user selects a range from the picker and clicks "apply" (if autoApply is true) |