Skip to content
On this page

Modes

Set the default mode for the datepicker

Info

  • When checking the examples, for boolean prop types, the example will show the behavior opposite of what is set for the default value
  • If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, autoRange as auto-range and so on

Info

Depending on the mode, v-model might be different, so make sure to use the proper configuration

range

Range picker mode

  • Type: boolean
  • Default: false
Code Example
vue
<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>

auto-range

Predefine range to select

Info

range prop must be enabled

  • Type: number | string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" range auto-range="5" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

multi-calendars

Enabling this prop will show multiple calendars side by side (on mobile devices, they will be in a column layout) for range picker. You can also pass a number to show more calendars. If you pass true, 2 calendars will be shown automatically.

Info

range prop must be enabled

This mode is not supported with month-picker, year-picker and time-picker

  • Type: boolean | number | string
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" range multi-calendars />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const date = ref();

        onMounted(() => {
          const startDate = new Date();
          const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
          date.value = [startDate, endDate];
        })
        
        return {
          date,
        }
    }
}
</script>

month-picker

Change datepicker mode to select only month and year

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="month" month-picker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const month = ref({ 
            month: new Date().getMonth(),
            year: new Date().getFullYear()
        });
        
        return {
            month,
        }
    }
}
</script>

time-picker

Change datepicker mode to select only time

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="time" time-picker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const time = ref({ 
            hours: new Date().getHours(),
            minutes: new Date().getMinutes()
        });
        
        return {
            time,
        }
    }
}
</script>

year-picker

Change datepicker mode to select only year

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="year" year-picker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const year = ref(new Date().getFullYear());
        
        return {
          year,
        }
    }
}
</script>

week-picker

Select a specific week range

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" week-picker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        // On selection, it will be the first and the last day of the week
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

text-input

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
Code Example
vue
<template>
    <Datepicker v-model="date" placeholder="Start Typing ..." text-input />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

inline

Removes the input field and places the calendar in your parent component

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" inline auto-apply />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

multi-dates

Allow selecting multiple single dates. When changing time, the latest selected date is affected. To deselect the date, click on the selected value

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" multi-dates />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

flow

Define the selecting order. Position in the array will specify the execution step. When you overwrite the execution step, the flow is reset

  • Type: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
  • Default: []

Info

flow is not supported with multi-calendars mode

Code Example
vue
<template>
    <Datepicker v-model="date" :flow="flow"  />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const flow = ref(['month', 'year', 'calendar']);
        
        return {
          date,
          flow,
        }
    }
}
</script>

utc

Output date(s) will be in UTC timezone string. You can use this if you gather dates from different timezones and want to send the date directly to the server

  • Type: boolean | 'preserve'
  • Default: false

Info

  • preserve - The input date will be the same, meaning, that it will not convert the date in the local timezone, but preserve the original UTC time.
  • true - The input date will be converted to the local timezone. Output date will be in the UTC format. Meaning that what is the actual v-model and what is displayed in the picker will be in the timezone difference.
Code Example
vue
<template>
    <Datepicker v-model="date" utc />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

vertical

Sets the datepicker orientation in the vertical mode. This mode will change the arrow action from left/right to the top/bottom, transitions will also be vertical

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" vertical />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
          date,
        }
    }
}
</script>

model-auto

Automatically switch between range and single picker modes

  • Type: Boolean
  • Default: false

Note

Since this prop in the background uses a partial-range make sure that range prop is provided and keep partial-range to true

This is only compatible with date pickers, specific modes are not supported

Code Example
vue
<template>
    <Datepicker v-model="date" model-auto range />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

timezone

Display the dates in a given timezone

  • Type: string
  • Default: null

Note

  • timezone is only supported with the date picker and not other modes for now
  • For supported timezones please refer to date-fns-tz
Code Example
vue
<template>
    <select name="timezone-select" id="timezone-select" v-model="timezone">
      <option :value="undefined">Select timezone</option>
      <option v-for="zone in timezones" :value="zone" :key="zone">{{ zone }}</option>
    </select>
    <Datepicker 
            v-model="date" 
            multi-calendars
            range
            :timezone="timezone"
            :partial-range="false" />
</template>

<script>
import { ref } from 'vue';
import { addDays } from 'date-fns';

export default {
    setup() {
        const date = ref([new Date(), addDays(new Date(), 5)]);
        const timezone = ref(undefined);

      // These are just for the demo purposes
      const timezones = [
        'Pacific/Midway', // -11
        'America/Adak', // -10,
        'Pacific/Gambier', // -9
        'America/Los_Angeles', // -8
        'America/Denver', // -7
        'America/Chicago', // -6
        'America/New_York', // -5
        'America/Santiago', // -4
        'America/Sao_Paulo', // -3
        'America/Noronha', // -2
        'Atlantic/Cape_Verde', // -1
        'UTC', // utc
        'Europe/Brussels', //+1
        'Africa/Cairo', // +2
        'Europe/Minsk', // +3
        'Europe/Moscow', // +4
        'Asia/Tashkent', // +5
        'Asia/Dhaka', // +6
        'Asia/Novosibirsk', // +7
        'Australia/Perth', // +8
        'Asia/Tokyo', // +9
        'Australia/Hobart', // +10
        'Asia/Vladivostok', // +11
        'Pacific/Auckland', // +12
      ];
        
        return {
          date,
          timezone,
          timezones
        }
    }
}
</script>

Released under the MIT License.