Date picker

Default

Use Date Picker for date input. The example also shows custom color and floating labels for single and range triggers.

This component requires the <client-only> </client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Code copied

<template>
  <div class="center date-picker-visual-demo">
    <s-date-picker
      v-model="value"
      label="Delivery date"
      label-float
      color="success"
      placeholder="Pick a day"
    />
    <s-date-picker
      v-model="range"
      type="daterange"
      start-label="Start date"
      end-label="End date"
      label-float
      color="#7d33ff"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const range = ref([])
</script>

Date and time

Set type="datetime" to pick date and time.

Code copied

<template>
  <div class="center">
    <s-date-picker
      v-model="value"
      type="datetime"
      placeholder="Pick date and time"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

Time

Use s-time-picker when only a time value is needed. It shares the same formatting, editable input, clear action, and time-column selection behavior.

Code copied

<template>
  <div class="center">
    <s-time-picker v-model="value" placeholder="Select time" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

Date range

Set type="daterange" to pick a date range.

Code copied

<template>
  <div class="center">
    <s-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="Start date"
      end-placeholder="End date"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

</script>

Other types

Month, quarter, year and week pickers.

Code copied

<template>
  <div class="center types">
    <s-date-picker v-model="month" type="month" placeholder="Month" />
    <s-date-picker v-model="quarter" type="quarter" placeholder="Quarter" />
    <s-date-picker v-model="year" type="year" placeholder="Year" />
    <s-date-picker v-model="week" type="week" placeholder="Week" />
    <s-date-picker
      v-model="multiple"
      multiple
      :limit-count="3"
      placeholder="Multiple dates"
    />
  </div>
</template>

<script setup lang="ts">

const month = ref('')
const quarter = ref('')
const year = ref('')
const week = ref('')

Date time range

Set type="datetimerange" to pick a date-time range with separate start/end time panels.

Code copied

<template>
  <div class="center">
    <s-date-picker
      v-model="value"
      type="datetimerange"
      start-placeholder="Start"
      end-placeholder="End"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

</script>

Shortcuts

Use shortcuts to provide quick selection options.

Code copied

<template>
  <div class="center">
    <s-date-picker
      v-model="value"
      :shortcuts="shortcuts"
      placeholder="Pick a day"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },

Disabled date

Use disabled-date to disable specific dates.

Code copied

<template>
  <div class="center">
    <s-date-picker
      v-model="value"
      :disabled-date="disabledDate"
      placeholder="Pick a day"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const disabledDate = (time: Date) => time.getTime() > Date.now()
</script>

Date markers

Use festival-method to add a compact label, notice dot, or custom cell style for business dates without changing the picker theme.

Code copied

<template>
  <div class="center">
    <s-date-picker v-model="value" :festival-method="festivalMethod" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const festivalMethod = ({ date }: { date: Date }) => {
  if (date.getDay() === 0 || date.getDay() === 6) {
    return { label: 'Rest', notice: true }
  }
}

API