Skip to content

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

PropTypeDefaultDescription
modelValueStringnullThe selected date value, used with v-model.
pickerObjectnullConfiguration options for the QDate picker.
formatStringnullCustom date format for displaying the selected date.
placeholderStringnullText shown when no date is selected.
iconString'las la-calendar'Icon displayed on the button.
disabledBooleanfalseDisables the button and prevents date selection.
denseBooleanfalseControls 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:

html
<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

PropTypeDefaultDescription
modelValueStringnullThe selected time value, used with v-model.
pickerObjectnullConfiguration options for the QTime picker.
withSecondsBooleanfalseDetermines whether seconds should be displayed in the time picker.
formatStringnullCustom time format for displaying the selected time.
placeholderStringnullText shown when no time is selected.
iconString'las la-clock'Icon displayed on the button.
disabledBooleanfalseDisables the button and prevents time selection.
denseBooleanfalseControls 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:

html
<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

PropTypeDefaultDescription
modelValueStringnullThe selected date-time value, used with v-model. Must be a valid date-time string.
datePickerObjectnullConfiguration options for the KDate picker.
timePickerObjectnullConfiguration options for the KTime picker.
withSecondsBooleanfalseDetermines whether seconds should be displayed in the time picker.
dateFormatStringnullCustom format for displaying the date.
timeFormatStringnullCustom format for displaying the time.
dateClassString''Custom CSS class for styling the date input.
timeClassString''Custom CSS class for styling the time input.
separatorString'-'Separator string between the date and time.
minStringnullMinimum selectable date-time value. Must be a valid date-time string.
maxStringnullMaximum selectable date-time value. Must be a valid date-time string.
timezoneStringnullTimezone for displaying and selecting the date-time.
placeholderStringnullPlaceholder text when no date-time is selected.
iconString'las la-calendar'Icon displayed on the date picker button.
disabledBooleanfalseDisables the date-time picker.
denseBooleanfalseControls 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:

html
<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 NameTypeDefaultDescriptionAdditional Notes
modelValueObjectnullContains start and end date-time values.Ensures validity using Moment.js. Updates when startTimeModel or endTimeModel changes.
datePickerObjectnullConfiguration options for the date picker.Merged with default date picker settings.
timePickerObjectnullConfiguration options for the time picker.Merged with default time picker settings.
withSecondsBooleanfalseDetermines whether seconds should be displayed in the time picker.Affects the KDateTime time format.
dateFormatStringnullCustom format for displaying dates.Overrides default date format in KDateTime.
timeFormatStringnullCustom format for displaying times.Overrides default time format in KDateTime.
dateClassString""CSS class applied to the date picker.Allows custom styling for the date input.
timeClassString""CSS class applied to the time picker.Allows custom styling for the time input.
separatorString'/'Separator between the date and time components.Affects the display format.
dateTimeSeparatorString'-'Separator between start and end date-time values.Affects the visual distinction between date-time pairs.
minStringnullMinimum selectable date-time value.Must be a valid date-time. Adjusts startTimeModel if necessary.
maxStringnullMaximum selectable date-time value.Must be a valid date-time. Adjusts endTimeModel if necessary.
timezoneStringnullTimezone in which the date-time values are displayed.Converts the date-time using toLocalTimezone().
sliderObjectnullConfiguration 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.
iconString'las la-calendar'Icon displayed in the date-time pickers.Overrides the default calendar icon.
disabledBooleanfalseDisables the component when true.Prevents user interaction.
denseBooleanfalseEnables 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:

html
<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:

html
<KDateTimeRange
  v-model="dateTimeRangeValue"
  :min="minTime"
  :max="maxTime"
  :slider="{ stacked: true }"
/>