Time
The time folder provides various components that allow users to input and manipulate time-related data. These components ensure proper formatting, validation, and interaction with date-time pickers, range selectors, and time zones.
KDate
This component is a date picker button. It allows users to select a date by clicking a button that opens a popup calendar built using Quasar component QDate.
Props
Prop | Type | Default | Description |
---|---|---|---|
modelValue | String | null | The selected date value, used with v-model . |
picker | Object | null | Configuration options for the QDate picker. |
format | String | null | Custom date format for displaying the selected date. |
placeholder | String | null | Text shown when no date is selected. |
icon | String | 'las la-calendar' | Icon displayed on the button. |
disabled | Boolean | false | Disables the button and prevents date selection. |
dense | Boolean | false | Controls the button's padding (compact styling). |
Usage
To define a date input with the format DD/MM/YY
, you can configure the KDate
component as follows:
<KDate
v-model="dateValue"
:date-format="'DD/MM/YY'"
/>
KTime
This component is a time picker button. It allows users to select a time by clicking a button that opens a popup calendar built using Quasar component QTime
Props
Prop | Type | Default | Description |
---|---|---|---|
modelValue | String | null | The selected time value, used with v-model . |
picker | Object | null | Configuration options for the QTime picker. |
withSeconds | Boolean | false | Determines whether seconds should be displayed in the time picker. |
format | String | null | Custom time format for displaying the selected time. |
placeholder | String | null | Text shown when no time is selected. |
icon | String | 'las la-clock' | Icon displayed on the button. |
disabled | Boolean | false | Disables the button and prevents time selection. |
dense | Boolean | false | Controls the button's padding (compact styling). |
Usage
To define a time input without an icon and that accounts for seconds, you can configure the KTime
component with the following props:
<KTime
v-model="timeValue"
:icon="null"
:with-seconds="true"
/>
KDateTime
This component provides a combined date and time picker, allowing users to select both a date and a time within a single UI element. It utilizes KDate for the date selection and KTime for the time selection, offering customization options for formatting, styling, and validation.
Props
Props
Prop | Type | Default | Description |
---|---|---|---|
modelValue | String | null | The selected date-time value, used with v-model . Must be a valid date-time string. |
datePicker | Object | null | Configuration options for the KDate picker. |
timePicker | Object | null | Configuration options for the KTime picker. |
withSeconds | Boolean | false | Determines whether seconds should be displayed in the time picker. |
dateFormat | String | null | Custom format for displaying the date. |
timeFormat | String | null | Custom format for displaying the time. |
dateClass | String | '' | Custom CSS class for styling the date input. |
timeClass | String | '' | Custom CSS class for styling the time input. |
separator | String | '-' | Separator string between the date and time. |
min | String | null | Minimum selectable date-time value. Must be a valid date-time string. |
max | String | null | Maximum selectable date-time value. Must be a valid date-time string. |
timezone | String | null | Timezone for displaying and selecting the date-time. |
placeholder | String | null | Placeholder text when no date-time is selected. |
icon | String | 'las la-calendar' | Icon displayed on the date picker button. |
disabled | Boolean | false | Disables the date-time picker. |
dense | Boolean | false | Controls the padding and spacing of the component (compact styling). |
Usage
To define a timestamp input with the format DD/MM/YY
for the date and HH:mm:ss
for the time, you can use the KDateTime
component like this:
<KDateTime
v-model="dateTimeValue"
:date-format="'DD/MM/YY'"
:time-format="'HH:mm:ss'"
:with-seconds="true"
/>
KDateTimeRange
This component is a date-time range selector that allows users to pick a start and end date-time. It integrates two KDateTime components with optional range slider support for easier selection. The component ensures valid date ranges, supports time zones, and allows custom formatting.
Props
Props Table
Prop Name | Type | Default | Description | Additional Notes |
---|---|---|---|---|
modelValue | Object | null | Contains start and end date-time values. | Ensures validity using Moment.js. Updates when startTimeModel or endTimeModel changes. |
datePicker | Object | null | Configuration options for the date picker. | Merged with default date picker settings. |
timePicker | Object | null | Configuration options for the time picker. | Merged with default time picker settings. |
withSeconds | Boolean | false | Determines whether seconds should be displayed in the time picker. | Affects the KDateTime time format. |
dateFormat | String | null | Custom format for displaying dates. | Overrides default date format in KDateTime . |
timeFormat | String | null | Custom format for displaying times. | Overrides default time format in KDateTime . |
dateClass | String | "" | CSS class applied to the date picker. | Allows custom styling for the date input. |
timeClass | String | "" | CSS class applied to the time picker. | Allows custom styling for the time input. |
separator | String | '/' | Separator between the date and time components. | Affects the display format. |
dateTimeSeparator | String | '-' | Separator between start and end date-time values. | Affects the visual distinction between date-time pairs. |
min | String | null | Minimum selectable date-time value. | Must be a valid date-time. Adjusts startTimeModel if necessary. |
max | String | null | Maximum selectable date-time value. | Must be a valid date-time. Adjusts endTimeModel if necessary. |
timezone | String | null | Timezone in which the date-time values are displayed. | Converts the date-time using toLocalTimezone() . |
slider | Object | null | Configuration object for the optional range slider. It conforms the Quasar QRange API. In addition it support the stacked property to display the slider above the time labels. | Enables the range slider if provided. |
icon | String | 'las la-calendar' | Icon displayed in the date-time pickers. | Overrides the default calendar icon. |
disabled | Boolean | false | Disables the component when true . | Prevents user interaction. |
dense | Boolean | false | Enables a more compact design when true . | Affects spacing and layout of the component. |
Usage
To specify a basic time range, you can configure the KDateTimeRange
component like this:
<KDateTimeRange
v-model="dateTimeRangeValue"
/>
If you want to use the KDateTimeRange
component with a slider stacked with the time labels, you can configure it like this:
<KDateTimeRange
v-model="dateTimeRangeValue"
:min="minTime"
:max="maxTime"
:slider="{ stacked: true }"
/>