Datepicker

The <wui-datepicker> is wrapper component built on top of vue2-datepicker plugin. It extends plugin functionality to fit WeScale requirements regarding functionality and style guide.

Description

To simplify implementation <wui-datepicker> follows similar logic as an old plugin wui-datepicker in terms of formatting and available properties. Datepicker consists of input group (input and trigger button) and calendar.

<wui-datepicker
  v-model="value"
  locale="en-US"
  placeholder="Input placeholder"
  :input-attr="{
    id: 'input-id-attribute',
    name: 'input-name-attribute',
    required: true,
  }"
  show-week-number
/>

export default { data() { return { value: "2022-08-21", }; }, }

v-model binding

If you bind a variable to the v-model prop, value will be the currently selected date. v-model value type depends on prop outputFormat.

Output format

Developers can set the format of binding value with prop outputFormat. Default output format is ISO 8601 string token "YYYY-MM-DD", other available options are:

<wui-datepicker value-type="timestamp" v-model="new Date().getTime()" />

Locale

Set locale property to use user locale for translations and formatting settings. Default locale is en-US. Datepicker supports all locales that are supported by old datepicker plugin. All locale formats contain values required by datepicker plugin.

<wui-datepicker locale="de-DE" placeholder="DD.MM.YYYY" show-week-number />

First day of week and some other properties are included in locale object. Example for de-DE:

{
  formatLocale: {
    months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
    monthsShort: ['Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
    weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    weekdaysShort: ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
    weekdaysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
    firstDayOfWeek: 1,
    firstWeekContainsDate: 4,
  },
  yearFormat: 'YYYY',
  monthFormat: 'MMMM',
  monthBeforeYear: true,
  valueType: 'DD.MM.YYYY',
}

Range selection

Range selection is supported via range property. If range is used datepicker will display two calendar side by side.

<wui-datepicker
  locale="de-DE"
  placeholder="Input in de-DE locale DD.MM.YYYY - DD.MM.YYYY"
  range
  show-week-number
/>

Formatting

Developers can set custom time formatting for input element using date tokens. Users can type in, or paste text in defined format. If format is not used default formatting will be locale format.

<wui-datepicker format="DD-MM-YY" placeholder="DD-MM-YY" />

User input

User can type in, or paste text in input element, and if that value is in correct user locale format it will be displayed in calendar and emitted as ISO 8601 string. e.g. user locale is de-DE user can type in or paste in 21072022 or 21.07.2022 and value will be formatted and used as date by plugin. In case input value is in different format than user locale plugin will simply ignore that value. For range datepicker user can also type value in locale format separated by dash - but it must follow strict locale format e.g. for de-DE correct user input should be 11.07.2022 - 20.07.2022

Set date

Use v-model property to set date. Accepted value depends on outputFormat prop, default is ISO 8601 string "YYYY-MM-DD".

If range prop is used value will be Array of ISO strings e.g. or date object if output-format="date"

<wui-datepicker :v-model="value" format="DD.MM.YYYY" />

export default { data() { return { value: null, }; }, }

Or use value e.g. for "readonly" or "disabled".

<wui-datepicker value="2022-06-21T12:00:00Z" :editable="false" disabled />

In case range option is used then value is Array of ISO 8601 formatted strings:

<wui-datepicker
  :value="['2022-07-21T12:00:00Z', '2022-07-28T12:00:00Z']"
  :editable="false"
  disabled
/>

Date selection

To set minimum required date selection use minDate property. It can be ISO 8601 string or JS Date object.

<wui-datepicker min-date="2022-07-14T12:00:00Z" show-week-number />

Or use allowPastDates property to allow selection of dates starting from today.

<wui-datepicker :allow-past-dates="false" show-week-number />

Calendar

Datepicker will be appended to body element by default as workaround to overflow issue, also positioning will depend on available space in browser window. Use open prop to immediately display calendar. In case range property is used calendar will not close on selection by default, user needs to confirm selection via click on check button or by outside click.

Component reference

<wui-datepicker>

• <wui-datepicker> Properties
• <wui-datepicker> Events
• <wui-datepicker> Slots

Properties

Events

Slots