Props
List of available props
uid
Sets unique id that will be passed through the datepicker components
Important: When using multiple pickers on the same page, this prop is required
- Type:
string
- Default:
'dp'
Code Example
<template>
<div>
<Datepicker uid="first" v-model="dateOne" />
<Datepicker uid="second" v-model="dateTwo" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const dateOne = ref();
const dateTwo = ref();
return {
dateOne,
dateTwo,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
is24
Whether to use 24H or 12H mode
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :is24="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
enableTimePicker
Enable or disable time picker
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :enableTimePicker="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
locale
Set datepicker locale. Datepicker will use built in javascript locale formatter to extract month and weekday names
- Type:
string
- Default:
'en-US'
Code Example
<template>
<Datepicker v-model="date" locale="de" cancelText="abbrechen" selectText="auswählen" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
range
Range picker mode
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const date = ref();
// For demo purposes assign range from the current date
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
date.value = [startDate, endDate];
})
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
autoRange
Predefine range to select
Note: range prop must be enabled
- Type:
number | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" range auto-range="5" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
twoCalendars
Enabling this prop will show two calendars side by side for range picker
Note: range prop must be enabled
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range twoCalendars />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
twoCalendarsSolo
When enabled, both calendars will be independent of each other
Note: range and twoCalendars props must be enabled
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range twoCalendars twoCalendarsSolo />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
monthPicker
Change datepicker mode to select only month and year
- Type:
boolean
- Default:
false
Note: When using this mode, range picker is not available
Code Example
<template>
<Datepicker v-model="month" monthPicker />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const month = ref({
month: new Date().getMonth(),
year: new Date().getFullYear()
});
return {
month,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
timePicker
Change datepicker mode to select only time
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="time" timePicker />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const time = ref({
hours: new Date().getHours(),
minutes: new Date().getMinutes()
});
return {
time,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
textInput
When enabled, will try to parse the date from the user input. You can also adjust the default behavior by providing text input options
Text input works with all picker modes.
- Type:
boolean
- Default:
false
Drawbacks:
- Validation properties will not work in the text input
Code Example
<template>
<Datepicker v-model="date" placeholder="Start Typing ..." textInput />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
textInputOptions
Configuration for textInput prop
- Type:
{ enterSubmit?: boolean; tabSubmit?: boolean; openMenu?: boolean; openMenuOnFoucs?: boolean; format?: string; rangeSeparator?: string }
- Default:
{ enterSubmit: true, tabSubmit: true, openMenu: true, openMenuOnFoucs: true, rangeSeparator: '-' }
Properties explanation:
enterSubmit
: When enabled, pressing enter will select a date if the input value is a valid date objecttabSubmit
: When enabled, pressing tab will select a date if the input value is a valid date objectopenMenu
: When enabled, opens the menu when clicking on the input fieldopenMenuOnFoucs
: When enabled, focusing input field will open the menuformat
: Override the default parsing format. Default is the string value from formatrangeSeparator
: If you userange
mode, the default separator is-
, you can change it here
Code Example
<template>
<Datepicker
v-model="date"
placeholder="Start Typing ..."
textInput
:textInputOptions="textInputOptions" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const textInputOptions = ref({
format: 'MM.dd.yyyy'
})
return {
date,
textInputOptions,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
v-model
modelValuev-model binding
- Type:
- Single picker:
Date | string
- Month picker:
{ month: number | string, year: number | string }
- Time picker:
{ hours: number | string, minutes: number | string }
- Range picker:
[Date, Date] | [string | string]
- Single picker:
- Default:
null
Code Example
<template>
<div>
<Datepicker uid="manual" :modelValue="date" @update:modelValue="setDate" />
<Datepicker uid="auto" v-model="date" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const setDate = (value) => {
date.value = value;
}
return {
date,
setDate,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
position
Datepicker menu position
- Type:
'left' | 'center' | 'right'
- Default:
'center'
Code Example
<template>
<Datepicker v-model="date" position="left" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
autoPosition
When enabled, based on viewport space available it will automatically position the menu above or bellow input field
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :autoPosition="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
altPosition
If you have issues with the menu being miss-placed, you can enable this prop to use an alternative positioning method
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" altPosition />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hideOffsetDates
Hide dates from the previous/next month in the calendar
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" hideOffsetDates />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
teleport
Set teleport target
- Type:
string
- Default:
'body'
You can inspect the page and check the menu placement
Code Example
<template>
<Datepicker v-model="date" teleport="#app" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
dark
Theme switch between the dark and light mode
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" dark />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
placeholder
Input placeholder
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
noToday
Hide today mark from the calendar
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noToday />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
weekNumbers
Display week numbers in the calendar
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" weekNumbers />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hoursIncrement
The value which is used to increment hours via arrows in the time picker
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" hoursIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
minutesIncrement
The value which is used to increment minutes via arrows in the time picker
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" minutesIncrement="5" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hoursGridIncrement
The value which is used to increment hours when showing hours overlay
It will always start from 0 until it reaches 24 or 12 depending on the is24
prop
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" hoursGridIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
minutesGridIncrement
The value which is used to increment minutes when showing minutes overlay
It will always start from 0 to 60 minutes
- Type:
number | string
- Default:
5
Code Example
<template>
<Datepicker v-model="date" minutesGridIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
noHoursOverlay
Disable overlay for the hours, only arrow selection will be available
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noHoursOverlay />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
noMinutesOverlay
Disable overlay for the minutes, only arrow selection will be available
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noMinutesOverlay />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
minDate
All dates before the given date will be disabled
- Type:
Date | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :minDate="new Date()" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
maxDate
All dates after the given date will be disabled
- Type:
Date | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :maxDate="new Date()" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
minTime
Sets the minimal available time to pick
- Type:
{ hours?: number | string, minutes?: number | string }
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :minTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
maxTime
Sets the maximal available time to pick
- Type:
{ hours?: number | string, minutes?: number | string }
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :maxTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
startDate
Open the datepicker to some preselected month and year
- Type:
Date | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :startDate="startDate" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const startDate = ref(new Date(2020, 1));
return {
date,
startDate,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
startTime
Set some default starting time
- Type:
- Single picker:
{ hours?: number | string, minutes?: number | string }
- Range picker:
{ hours?: number | string, minutes?: number | string }[]
- Single picker:
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :startTime="startTime" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const startTime = ref({ hours: 0, minutes: 0 });
return {
date,
startTime,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
weekStart
Day from which the week starts. 0-6, 0 is Sunday, 6 is Saturday
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" weekStart="0" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
disabled
Disables the input
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" disabled />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
readonly
Sets the input in readonly state
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" readonly />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
weekNumName
Sets the label for the week numbers column
- Type:
string
- Default:
'W'
Code Example
<template>
<Datepicker v-model="date" weekNumbers weekNumName="We" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
format
Format the value of the date(s) in the input field. Formatting is done automatically via provided string format. However, you can override the default format by providing a custom formatter function
- Type:
string | (params: Date | Date[]) => string
- Default:
- Single picker:
'MM/dd/yyyy HH:mm'
- Range picker:
'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm'
- Month picker:
'MM/yyyy'
- Time picker:
'HH:mm'
- Time picker range:
'HH:mm - HH:mm'
- Single picker:
Note: If is24 prop is set to false
, hours format will be changed to 'hh:mm aa'
For additional information on how to pass custom string format you can check Unicode tokensopen in new window
Code Example
<template>
<Datepicker v-model="date" :format="format" />
</template>
<script>
// Example using a custom format function
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
return {
date,
format,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
previewFormat
Format the value of the date(s) in the action row
- Type:
string | (params: Date | Date[]) => string
- Default:
null
Same configuration as in format prop
Note: If not provided, it will auto inherit data from the format prop
Code Example
<template>
<Datepicker v-model="date" :previewFormat="format" />
</template>
<script>
// Example using a custom format function
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
return {
date,
format,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
monthNameFormat
Set the month name format
- Type:
'short' | 'long'
- Default:
'short'
Code Example
<template>
<Datepicker v-model="date" monthNameFormat="long" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hideInputIcon
Hide calendar icon in the input field
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" hideInputIcon />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
state
Validation state of the calendar value. Sets the green/red border depending on the value
- Type:
boolean
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :state="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
clearable
Add a clear icon to the input field where you can set the value to null
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :clearable="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
closeOnScroll
Close datepicker menu on page scroll
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" closeOnScroll />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
autoApply
If set to true
, clicking on a date value will automatically select the value
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" autoApply />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
closeOnAutoApply
If set to false
, clicking on a date value will automatically select the value but will not close the datepicker menu. Closing will be available on a click-away or clicking on the input again
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" autoApply :closeOnAutoApply="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
filters
Disable specific values from being selected in the month, year, and time picker overlays
- Type:
{
months?: number[]; // 0 = Jan, 11 - Dec
years?: number[]; // Array of years to disable
times?: {
hours?: number[] // disable specific hours
minutes?: number[] // disable sepcific minutes
}
}
2
3
4
5
6
7
8
- Default:
null
Code Example
<template>
<!-- Disable first 3 months -->
<Datepicker v-model="date" :filters="{ months: [0, 1, 2] }" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
disableMonthYearSelect
Removes the month and year picker
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" disableMonthYearSelect />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
yearRange
Specify start and end year for years to generate
- Type:
[number, number]
- Default:
[1970, 2100]
Code Example
<template>
<Datepicker v-model="date" :yearRange="[2020, 2040]" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
disabledDates
Disable specific dates
- Type:
Date[] | string[]
- Default:
[]
Code Example
<template>
<Datepicker v-model="date" :disabledDates="disabledDates" />
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const date = ref(new Date());
// For demo purposes disables the next 2 days from the current date
const disabledDates = computed(() => {
const today = new Date();
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
const afterTomorrow = new Date(tomorrow);
afterTomorrow.setDate(tomorrow.getDate() + 1);
return [tomorrow, afterTomorrow]
})
return {
disabledDates,
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
inline
Removes the input field and places the calendar in your parent component
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" inline autoApply />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
selectText
Select text label in the action row
- Type:
string
- Default:
'Select'
Code Example
<template>
<Datepicker v-model="date" selectText="Pick" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cancelText
Cancel text label in the action row
- Type:
string
- Default:
'Cancel'
Code Example
<template>
<Datepicker v-model="date" cancelText="Close" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
inputClassName
Add a custom class to the input field
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" inputClassName="dp-custom-input" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-input {
box-shadow: 0 0 6px #1976d2;
color: #1976d2;
&:hover {
border-color: #1976d2;
}
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
menuClassName
Add a custom class to the datepicker menu wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" menuClassName="dp-custom-menu" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-menu {
box-shadow: 0 0 6px #1976d2;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
calendarClassName
Add a custom class to the calendar wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" calendarClassName="dp-custom-calendar" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-calendar {
.dp__calendar_item {
border: 1px solid var(--dp-border-color-hover);
}
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
calendarCellClassName
Add a custom class to the calendar cell wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" calendarCellClassName="dp-custom-cell" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-cell {
border-radius: 50%;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23