Skip to content
On this page

Modes configuration

Props for configuring and extending the datepicker when using a specific mode

Info

  • If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, partialRange as partial-range and so on

partial-range

This prop is enabled by default, meaning, two dates are not required for range input. If no second date is selected, the value will be null

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

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

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

preset-ranges

When configured, it will provide a sidebar with configured range that user can select

Info

range prop must be enabled

  • Type: PresetRange[]
  • Default: []
ts
interface PresetRange {
  label: string;
  range: Date[] | string[];
  style?: Record<string, string>;
  slot?: string
}
Code Example
vue
<template>
    <Datepicker v-model="date" range :preset-ranges="presetRanges">
      <template #yearly="{ label, range, presetDateRange }">
        <span @click="presetDateRange(range)">{{ label }}</span>
      </template>
    </Datepicker>
</template>

<script>
import { ref } from 'vue';
import { endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths } from 'date-fns';

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

        const presetRanges = ref([
          { label: 'Today', range: [new Date(), new Date()] },
          { label: 'This month', range: [startOfMonth(new Date()), endOfMonth(new Date())] },
          {
            label: 'Last month',
            range: [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))],
          },
          { label: 'This year', range: [startOfYear(new Date()), endOfYear(new Date())] },
          {
            label: 'This year (slot)',
            range: [startOfYear(new Date()), endOfYear(new Date())],
            slot: 'yearly',
          },
        ]);
        
        return {
          date,
          presetRanges,
        }
    }
}
</script>

min-range

Set minimal range available for selection. This is the number of days between the selected start and end date

Info

range prop must be enabled

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

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

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

max-range

Set maximal range available for selection. This is the number of days between the selected start and end date

Info

range prop must be enabled

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

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

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

fixed-start

Allows only adjustment of the second date in the defined range

Info

range prop must be enabled

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixed-end

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" range fixed-start :clearable="false" />
</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>

fixed-end

Allows only adjustment of the first date in the defined range

Info

range prop must be enabled

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixed-start

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" range fixed-end :clearable="false" />
</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>

multi-calendars-solo

When enabled, both calendars will be independent of each other

Info

range and multi-calendars props must be enabled

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" range multi-calendars multi-calendars-solo />
</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>

multi-static

The default calendar view when using multi-calendars is to keep it on the month selected by the user. When this prop is disabled, it will auto-update the first calendar when the range starts and adjust the rest of them based on the first month

Info

range and multi-calendars props must be enabled

  • Type: boolean
  • Default: true
Code Example
vue
<template>
    <Datepicker v-model="date" range multi-calendars :multi-static="false" />
</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>

text-input-options

Configuration for text-input prop

  • Type: TextInputOptions
  • Default: { enterSubmit: true, tabSubmit: true, openMenu: true, rangeSeparator: '-' }
ts
interface TextInputOptions { 
  enterSubmit?: boolean;
  tabSubmit?: boolean;
  openMenu?: boolean;
  format?: string | string[] | ((value: string) => Date | null);
  rangeSeparator?: string;
}

Properties explanation:

  • enterSubmit: When enabled, pressing enter will select a date if the input value is a valid date object
  • tabSubmit: When enabled, pressing tab will select a date if the input value is a valid date object
  • openMenu: When enabled, opens the menu when clicking on the input field
  • format: Override the default parsing format. Default is the string value from format. You can also pass multiple parser patterns or a custom parser function and parse the input yourself. When the input is focused, the date will be shown in this format.
  • rangeSeparator: If you use range mode, the default separator is -, you can change it here
Code Example
vue
<template>
    <Datepicker 
      v-model="date"
      placeholder="Start Typing ..."
      text-input
      :text-input-options="textInputOptions" />
</template>

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

export default {
    setup() {
        const date = ref();
        const textInputOptions = ref({
          format: 'MM.dd.yyyy HH:mm'
        })
        
        return {
            date,
            textInputOptions,
        }
    }
}
</script>

mode-height

If you use month-picker, time-picker or year-picker, set custom height of the picker in px

  • Type: number | string
  • Default: 255
Code Example
vue
<template>
    <Datepicker v-model="time" time-picker mode-height="120" />
</template>

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

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

inline-with-input

Use input with the inline mode, useful if you enable text-input

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

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

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

multi-dates-limit

Limit the number of dates to select when multi-dates is enabled

  • Type: number | string
  • Default: null
Code Example
vue
<template>
  <Datepicker v-model="date" multi-dates multi-dates-limit="3" />
</template>

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

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

    return {
      date,
    }
  }
}
</script>

Released under the MIT License.