Appearance

Date Picker ​

The FTDatePicker component displays a calendar and allows the user to select a date (or range) with or without time.

Usage ​

Datepickers in their simplest form contain a calendar which allows to select days, months and years as well as time. Optionally they can be configured as date only or time only.

Composition api (script setup) ​

vue
<script setup lang="ts">
  import { FTDatePicker } from '@fasttrack-solutions/vue-components-lib';
</script>
<script setup lang="ts">
  import { FTDatePicker } from '@fasttrack-solutions/vue-components-lib';
</script>

Options api ​

vue
<script>
  import { FTDatePicker } from '@fasttrack-solutions/vue-components-lib';
  export default {
    components: {
      FTDatePicker
    }
  }
</script>
<script>
  import { FTDatePicker } from '@fasttrack-solutions/vue-components-lib';
  export default {
    components: {
      FTDatePicker
    }
  }
</script>

Slots ​

The component supports the following slots:

  • default: Use this slot to render custom content within the date picker. The slot receives props from the picker for additional flexibility.

Events ​

The FTDatePicker emits the following events:

  • update:modelValue: Emitted whenever the value of the date picker changes.

Examples ​

Basic Setup with <script setup> ​

Below is an example demonstrating various use cases for FTDatePicker:

INFO

Datetime Range


December 2025
S
M
T
W
T
F
S
30
1
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
1
2
3
January 2026
S
M
T
W
T
F
S
28
29
30
31
1
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
vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTDatePicker } from '../components';

const start = new Date();
const end = new Date(start);
end.setDate(end.getDate() + 7);

const model = ref({ start, end }); // Date range
</script>

<template>
  <section>
    <h3>Datetime Range</h3>
    <FTDatePicker
      v-model.range="model"
      is24hr
      mode="dateTime"
      :minDate="start"
      :maxDate="end"
    />
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTDatePicker } from '../components';

const start = new Date();
const end = new Date(start);
end.setDate(end.getDate() + 7);

const model = ref({ start, end }); // Date range
</script>

<template>
  <section>
    <h3>Datetime Range</h3>
    <FTDatePicker
      v-model.range="model"
      is24hr
      mode="dateTime"
      :minDate="start"
      :maxDate="end"
    />
  </section>
</template>

INFO

Single Date


December 2025
S
M
T
W
T
F
S
30
1
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
1
2
3
vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTDatePicker } from '../components';

const model2 = ref(null); // Single date
</script>

<template>
  <section>
    <h3>Single Date</h3>
    <FTDatePicker v-model="model2" :columns="1" />
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTDatePicker } from '../components';

const model2 = ref(null); // Single date
</script>

<template>
  <section>
    <h3>Single Date</h3>
    <FTDatePicker v-model="model2" :columns="1" />
  </section>
</template>

Props ​

The FTDatePicker component accepts the following props:

NameDefaultDescription
modelValue''The value of the date picker. Can be a string, object, array, number, or date. Required.
forceRangefalseForce the date picker to operate in range selection mode.
columns2Number of columns to display in the picker interface.
mode'date'Mode of the date picker (e.g., 'date', 'datetime', 'time').
disabledfalseDisable the date picker.
preferredTimeFormatOverride''Custom time format to override the default. Example: 'h:mm A'.
timezone'UTC'The timezone to use for the date picker. Adjusted dynamically based on the mode.
is24hrfalseUse 24-hour time format. Determined by the preferredTimeFormat.
locale'en'Locale setting for the date picker. Defaults to 'en'.
attributes[{ key: 'today', highlight: { ... } }]Custom attributes for the date picker, such as highlighting today's date.
steps1Steps for time selection in the picker.
isRangefalseAutomatically set to true if forceRange is enabled or the modelValue represents a range.
color'pink'Theme color for the date picker interface.
isRequiredtrueMarks the input as required.
minDatenullThe minimum selectable date in the picker.
maxDatenullThe maximum selectable date in the picker.
masks{}Formatting masks for date display (e.g., { input: 'MMM DD, YYYY' }).
popovertrueDisplay the date picker in a popover when enabled.

Copyright © Fast Track Solutions