Date Picker

The date picker allows users to select a date from a calendar.

Basic Usage

//

Property Value:

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" display-helper />
</template>

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

const datePickerModel = ref('');
</script>

Adding Label

Date Picker

//

Value: 09-11-1997

Property Value: 09-11-1997

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" display-helper format="MM-DD-YYYY" />
</template>

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

const datePickerModel = ref('');
</script>

Custom Component

You can use the default slot to use any component as the date picker input or to change the format of the rendered date without changing the format of the date model.

Custom Date Picker Input

datePickerModel:
datePickerInputModel:

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Custom Date Picker Input"
    display-helper
    format="MMM-DD-YYYY"
    @update:model-value="handleDatePickerModelChange"
  >
    <template #default="{ handleClick }">
      <spr-input
        v-model="datePickerInputModel"
        readonly
        class="spr-w-full spr-cursor-pointer"
        placeholder="MMM / DD"
        @click="handleClick"
      >
        <template #icon>
          <Icon icon="ph:calendar-blank" />
        </template>
      </spr-input>
    </template>
  </spr-date-picker>
</template>

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

const datePickerModel = ref('');
const datePickerInputModel = ref('');

const handleDatePickerModelChange = (newValue: string) => {
  datePickerInputModel.value = dayjs(newValue).format('MMM / DD').toUpperCase();
};
</script>

Custom Width

You can manually set the width of the date picker by passing the width prop.

Date Picker

//

Property Value:

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" width="400px" display-helper />
</template>

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

const datePickerModel = ref('');
</script>

Date Format

You can specify the format of the date by passing the format prop. The default format is MM-DD-YYYY. The component will return dates in the specified format.

Date Picker

//

Value:

<template>
  <spr-date-picker 
    id="datepicker" 
    v-model="datePickerModel" 
    label="Date with YYYY-MM-DD format" 
    format="YYYY-MM-DD" 
    display-helper 
  />
</template>

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

const datePickerModel = ref('');
</script>

Date with MM/DD/YYYY format

//

Value:

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date with MM/DD/YYYY format"
    format="MM/DD/YYYY"
    display-helper
  />
</template>

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

const datePickerModel = ref('');
</script>

Disabled

Add the disabled prop to disable the date picker.

Date Picker

//

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" display-helper disabled />
</template>

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

const datePickerModel = ref('');
</script>

Read Only

Add the readonly prop to make date picker as read only.

Date Picker

//

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" display-helper readonly />
</template>

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

const datePickerModel = ref('10-12-2025');
</script>

Helper Text

A helper message is a text label displayed below the input field, offering additional information such as instructions, formatting tips, or validation feedback.

To display the helper message, set the display-helper prop to true and add the helper-text prop with the message content. You can also include an icon by using the helper-icon prop, which utilizes the Iconify icon library.

Using Helper Text Directly to Props

Date Picker

//

This is a helper message

Property Value:

<template>
  <spr-date-picker
    id="datepicker"
    class="[&>p]:spr-m-0"
    v-model="datePickerModel"
    label="Date Picker"
    helper-icon="ph:warning-circle-fill"
    helper-text="This is a helper message"
    display-helper
  />
</template>

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

import { Icon } from '@iconify/vue';

const datePickerModel = ref('');
</script>

Using Helper Text Slot

Date Picker

//

This is a helper message

<template>
  <spr-date-picker id="datepicker" class="[&>p]:spr-m-0" v-model="datePickerModel" label="Date Picker" display-helper>
    <template #helperMessage>
      <span>This is a helper message</span>
    </template>
  </spr-date-picker>
</template>

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

import { Icon } from '@iconify/vue';

const datePickerModel = ref('');
</script>

Error State

To handle error states, add the error prop to the date picker. You can also include an icon by using the helper-icon prop, which utilizes the Iconify icon library.

Using Helper Text Directly to Props

Date Picker

//

This is a helper message

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    helper-icon="ph:warning-circle-fill"
    helper-text="This is a helper message"
    display-helper
    error
  />
</template>

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

import { Icon } from '@iconify/vue';

const datePickerModel = ref('');
</script>

Using Helper Text Slot

Date Picker

//

This is a helper message

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" display-helper error>
    <template #helperMessage>
      <Icon icon="ph:warning-circle-fill" width="20px" height="20px" />
      <span>This is a helper message</span>
    </template>
  </spr-date-picker>
</template>

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

import { Icon } from '@iconify/vue';

const datePickerModel = ref('');
</script>

Manually Set Current Year

You can manually set the current year to be shown in the calendar. The default current year is the current year. Pass the current-year prop to set the current year.

Date Picker

//

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" current-year="2000" display-helper />
</template>

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

import { Icon } from '@iconify/vue';

const datePickerModel = ref('');
</script>

Manually Set Min-Max Year

It also allows you to manually set the minimum and maximum year to be shown in the calendar. The default minumum year is set 1900 and the maximum year is the current year.

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    :min-max-year="minMaxYear"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const minMaxYear = ref({
  min: 2000,
  max: 2025,
});
</script>

Rest Days

You can set the rest days in the week by passing the rest-days prop.

The value should be an array of strings that may contain the ff:

const restdays = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];

Date Picker

//

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" :rest-days="restDays" display-helper />
</template>

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

const datePickerModel = ref('');

const restDays = ref(['mo', 'we', 'fr', 'sa']);
</script>

Disabled Dates

You can disable specific dates by passing the disabled-dates prop. There are ways to disable dates:

• Disable dates using From and To
• Disable Past or Future Dates
• Disable Past or Future with Selected Date
• Disable Selected Dates
• Disable Weekends
• Disable Weekdays
• Disable Selected Days

Disable dates using From and To

To disable dates using From and To, pass the disabled-dates props that contains string of from and to.

from and to should be in the format MM-DD-YYYY.

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    :disabled-dates="disabledDates"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const disabledDates = ref({ from: '02-12-2025', to: '05-15-2025' });
</script>

Disable Past or Future Dates

To disable past dates, pass the disabled-dates prop. that contains boolean of pastDates or futureDates set to true.

Past Dates Disabled

//

Future Dates Disabled

//

<template>
  <spr-date-picker
    id="datepicker1"
    v-model="datePickerModel"
    label="Past Dates Disabled"
    :disabled-dates="disabledPastDates"
    display-helper
  />

  <spr-date-picker
    id="datepicker2"
    v-model="datePickerModel"
    label="Future Dates Disabled"
    :disabled-dates="disabledFutureDates"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const disabledPastDates = ref({ pastDates: true });

const disabledFutureDates = ref({ futureDates: true });
</script>

Disable Past or Future with Selected Date

To disable past dates, pass the disabled-dates prop. that contains date string in pastDates or futureDates.

pastDates and futureDates should be in the format MM-DD-YYYY.

Past Dates Disabled With Selected Date

//

Future Dates Disabled With Selected Date

//

<template>
  <spr-date-picker
    id="datepicker1"
    v-model="datePickerModel"
    label="Date Picker"
    :disabled-dates="disabledPastDates"
    display-helper
  />

  <spr-date-picker
    id="datepicker2"
    v-model="datePickerModel"
    label="Date Picker"
    :disabled-dates="disabledFutureDates"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const disabledPastDates = ref({ pastDates: '3-14-2025' });

const disabledFutureDates = ref({ futureDates: '3-14-2025' });
</script>

Disable Selected Dates

To disable selected dates, pass the disabled-dates prop. that contains array of selectedDates set to true.

selectedDates should be in the format MM-DD-YYYY.

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    :disabled-dates="disabledDates"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const disabledDates = ref({ selectedDates: ['3-14-2025', '3-15-2025', '3-25-2025', '3-28-2025'] });
</script>

Disable Weekends

To disable weekends, pass the disabled-dates prop. that contains boolean of weekends set to true.

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    :disabled-dates="disabledDates"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const disabledDates = ref({ weekends: true });
</script>

Disable Weekdays

To disable weekdays, pass the disabled-dates prop. that contains boolean of weekdays set to true.

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    :disabled-dates="disabledDates"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const disabledDates = ref({ weekdays: true });
</script>

Disable Selected Days

To disable selected days, pass the disabled-dates prop. that contains array of selectedDays.

The array should contain the following values:

const selectedDays = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    :disabled-dates="disabledDates"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const disabledDates = ref({ selectedDays: ['su', 'we', 'th', 'sa'] });
</script>

Pre-selected Date

You can pre-select a date by just adding value in your v-model. The value should be in the format MM-DD-YYYY.

Date Picker

//

<template>
  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" display-helper />
</template>

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

const datePickerModel = ref('09-11-1997');
</script>

Get Date Formats

To get the date formats, you can use the @get-date-formats emits. When the date is valid it will return a different formats.

Output:

{}

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    @get-date-formats="getDateFormats"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const getDateFormats = (date) => {
  console.log(date);
};
</script>

Get Month Lists

To get the month lists used, you can use the @get-month-lists emits.

Date Picker

//

Output:

[]

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    @get-month-list="getMonthList"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const getMonthList = (date) => {
  console.log(date);
};
</script>

Get Year Lists

To get the year lists used, you can use the @get-year-lists emits.

Date Picker

//

Output:

[]

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    @get-year-list="getYearList"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const getYearList = (date) => {
  console.log(date);
};
</script>

Error Handling

Since there is existing error handling for the date picker, you can use the @get-date-errors emit to get the list of component-level error validations.

List of component-level error validations:

• Validate Date if it is valid MMM/DD/YYYY
• Validate Date Year if it is under min and max year

Output:

[]

Date Picker

//

<template>
  <spr-date-picker
    id="datepicker"
    v-model="datePickerModel"
    label="Date Picker"
    @get-date-errors="getDateErrors"
    display-helper
  />
</template>

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

const datePickerModel = ref('');

const getDateErrors = (errors) => {
  console.log(errors);
};
</script>

Popper Strategy

The Popper strategy is primarily used when working with elements like modal. It helps control the positioning behavior of popper. The strategy ensures that the popper element is dynamically positioned based on the viewport, the reference element, or other factors such as scrolling or resizing.

By default, the Popper strategy is set to absolute, which positions the popper element relative to the nearest positioned ancestor (usually the body element). However, you can change the strategy to fixed, which positions the popper element relative to the viewport, ensuring that it remains in place even when the page is scrolled.

Pass the prop popper-strategy to change the behavior position of the popper.

Important to note:

Do not forget to pass prop wrapperPosition to overwrite relative position into initial.

<template>
  <spr-button tone="success" @click="modalModel = true">Open Modal</spr-button>

  <spr-modal v-model="modalModel" title="Date Picker with Modal">
    <spr-date-picker
      id="datepicker"
      v-model="datePickerModel"
      label="Date Picker"
      popper-strategy="fixed"
      wrapper-position="initial"
      display-helper
    />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </spr-modal>
</template>

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

const modalModel = ref(false);

const datePickerModel = ref('');
</script>

You can also use the popper-container prop to specify a custom container for the popper element. This is useful when you want to restrict the popper's positioning context to a specific element within your application.

Since the popper is being teleported to a different container, the popper-width prop will not work as expected. To set a custom width for the popper in this case, you can use custom styles or CSS classes to define the desired width.

<template>
  <div>
    <spr-dropdown
      id="sample-dropdownCustomPopper"
      width="300px"
      :triggers="['hover', 'click']"
      :popper-triggers="['hover', 'click']"
      popper-width="500px"
      :auto-hide="false"
    >
      <spr-button class="spr-w-full" tone="success" has-icon>
        <span>Custom Popper With Dropdown</span>
        <Icon icon="ph:caret-down" />
      </spr-button>
      <template #popper>
        <spr-date-picker
          id="datepicker"
          v-model="datePickerModel"
          label="Date Picker"
          popper-strategy="fixed"
          popper-container="#sample-dropdownCustomPopper"
          wrapper-position="initial"
          display-helper
        />
      </template>
    </spr-dropdown>
  </div>
</template>

Action

Date Picker

//

<template>
  <div class="spr-space-y-2">
    <spr-button tone="success" @click="clearDate()">Clear Date</spr-button>
    <spr-date-picker ref="datePickerRef" id="datepicker" v-model="datePickerModel" label="Date Picker" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Icon } from '@iconify/vue';

const datePickerModel = ref('');
const datePickerRef = ref(null);

const clearDate = () => {
  datePickerRef.value.clear();
};
</script>

API Reference

Property	Description	Type	Default
id	Required to bind popper within the datepicker	String	-
v-model	Binds the selected date value	String	-
label	Label text for the input field	String	-
width	Sets the width of the input	String	400px
format	Format for the selected date (e.g., 'MM-DD-YYYY', 'YYYY-MM-DD', 'MM/DD/YYYY')	String	MM-DD-YYYY
disabled	Disables the date picker	Boolean	false
readonly	Makes the date picker read-only	Boolean	false
helper-text	Displays a helper message below the input	String	-
helper-icon	Icon to display alongside the helper message	String	-
display-helper	Shows the helper message	Boolean	false
error	Indicates that there is an error with the input	Boolean	false
current-year	Sets the current year in the calendar view	String	2025
min-max-year	Sets the minimum and maximum years in the calendar	Object	{ min: 1900, max: 2025 }
rest-days	Array of days to be treated as rest days	Array	[]
disabled-dates	Disables specific dates or date ranges	Object	{}
placement	Changes the placement of the dropdown popper (e.g., `bottom`, `top`, `left`, `right`)	string	`bottom`
wrapper-position	CSS position of the date picker wrapper	String	relative
popper-strategy	Popper positioning strategy ('absolute' or 'fixed')	String	absolute
popper-container	CSS selector or HTMLElement to specify a custom container for the popper element	String | HTMLElement	''
@get-input-value	Emits the actual date that is being typed or select on the datepickker	Function	-
@get-date-formats	Emits the available date formats	Function	-
@get-month-list	Emits the list of months	Function	-
@get-year-list	Emits the list of years	Function	-
@get-date-error	Emits the available date errors	Function	-

Product Uses