Vue

@litopis/vue provides a component with standard Vue props and v-model.

Installation

npm install @litopis/vue vue

vue

<script setup lang="ts">
import { LitopisDatePicker } from "@litopis/vue";
import "@litopis/dom/styles/base.css";
</script>

Example

Value: current date

Value

Bind a single date with v-model. Picker options are regular component props, so they work naturally with template bindings.

vue

<script setup lang="ts">
import { ref } from "vue";
import { LitopisDatePicker, type LitopisDateValue } from "@litopis/vue";

const date = ref<LitopisDateValue | null>(null);
</script>

<template>
  <LitopisDatePicker
    v-model="date"
    mode="popover"
    label="Start date"
  />
</template>

Component ref

The component instance exposes controller and getISOValue().

vue

<script setup lang="ts">
import { ref } from "vue";
import { LitopisDatePicker } from "@litopis/vue";

const picker = ref<InstanceType<typeof LitopisDatePicker> | null>(null);

function readDate() {
  return picker.value?.getISOValue() ?? "";
}
</script>

<template><LitopisDatePicker ref="picker" /></template>

Range

Use one range object, or bind its endpoints separately when the form already stores from and to fields. These are alternative bindings.

vue

<script setup lang="ts">
import { ref } from "vue";
import { LitopisDatePicker, type LitopisDateRange } from "@litopis/vue";

const stay = ref<LitopisDateRange>({ start: null, end: null });
</script>

<template>
  <LitopisDatePicker
    v-model="stay"
    selection="range"
    layout="split"
  />
</template>

vue

<script setup lang="ts">
import { ref } from "vue";
import { LitopisDatePicker, type LitopisDateValue } from "@litopis/vue";

const from = ref<LitopisDateValue | null>(null);
const to = ref<LitopisDateValue | null>(null);
</script>

<template>
  <LitopisDatePicker
    v-model:from="from"
    v-model:to="to"
    selection="range"
    layout="split"
  />
</template>

Unavailable dates

Bind disabled-dates to an availability snapshot or pass is-date-disabled for a synchronous predicate. A complete range cannot include an unavailable day. The picker emits visible-month-change with the first day whenever the displayed month changes, including after navigation or selection, but not on initial render.

vue

<LitopisDatePicker
  v-model="appointment"
  :disabled-dates="disabledDates"
  @visible-month-change="loadAvailability"
/>

Custom input

Use the input slot for your own input component or element. Litopis keeps its classes and placeholder while supplying the picker behavior and accessibility attributes.

vue

<LitopisDatePicker v-model="date">
  <template #input>
    <input class="my-input" placeholder="Choose a date" />
  </template>
</LitopisDatePicker>

For a split range, use the input and end-input slots.

Styling

Pass class to the component root. Import one Litopis stylesheet in your application entry.

Styling guide →