@contactless/vue-datepicker

@contactless/vue-datepicker

Public Vue 3 datepicker with Vaadin-style linked month/year scroll, published under the @contactless npm scope.

Install

npm i @contactless/vue-datepicker

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { ContactlessDatePicker } from '@contactless/vue-datepicker'
import '@contactless/vue-datepicker/style.css'

const value = ref<string | null>(null)
</script>

<template>
  <ContactlessDatePicker
    v-model="value"
    :enable-time="false"
    :i18n="{
      today: 'Today',
      reset: 'Reset',
    }"
  />
</template>

Custom input

By default the picker renders a built-in text field. Provide your own trigger via the #input slot:

<ContactlessDatePicker v-model="value">
  <template #input="{ value, placeholder, disabled, open, readonly, inputMode, onFocus, onPointerDown, onInput, onBlur, onKeydown }">
    <input
      type="text"
      :value="value"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      :inputmode="inputMode"
      :class="{ 'is-open': open }"
      @pointerdown="onPointerDown"
      @focus="onFocus"
      @input="onInput(($event.target as HTMLInputElement).value)"
      @blur="onBlur"
      @keydown="onKeydown"
    />
  </template>
</ContactlessDatePicker>

Wire the slot handlers so typing, blur parsing, keyboard shortcuts, and opening the overlay keep working. The DatePickerInputSlotProps type is exported for TypeScript consumers.

Props

Overlay placement

The calendar teleports to document.body and opens below the field when it fits. If the field is near the bottom of the viewport (or a scroll/keyboard shrink leaves more room above), it flips above. Placement is recomputed on resize and visualViewport changes.

On touch / coarse pointers (and viewports narrower than the desktop date+time overlay), the picker uses a compact layout that matches the field width:

• Date+time: Date / Time tabs. Date shows the year strip + month scroller; Time shows Hours / Minutes.
• Date-only: the same year + month overlay, still field-width.

Desktop date+time stays side-by-side (year | month | time).

Scroll policy matches the registration dropdown:

• Desktop (fine pointer): page scroll is locked; a transparent backdrop swallows outside click / wheel.
• Mobile (coarse pointer): the page can scroll; the overlay closes on outside tap, drag, wheel, or scroll (after a short open grace so keyboard/focus scroll-into-view does not dismiss it).

Events

Model contract (forms)

• Date only → yyyy-MM-dd
• With time → yyyy-MM-dd'T'HH:mm

Develop

npm install
npm test
npm run build
npm run publish:pkg   # requires NPM_TOKEN with @contactless publish rights (see .npmrc)

Local consumer wiring before first publish:

"@contactless/vue-datepicker": "file:../../vue-datepicker"

Theming

Override CSS variables on .cl-dp / :root:

• --cl-dp-accent, --cl-dp-bg, --cl-dp-fg, --cl-dp-border, --cl-dp-radius, …