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>

Styling

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

Styling guide →