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
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 Width
You can manually set the width of the date picker by passing the width prop.
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.
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><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.
<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.
<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
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
<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
<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
<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.
<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.
<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'];<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.
<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.
<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.
<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.
<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.
<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.
<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'];<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.
<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:
{}<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.
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.
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:
[]
<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.
<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"
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>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` |
| @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
