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

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

@everything-registry/sub-chunk-254 @infinitebrahmanuniverse/nolb-_dp

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago