Date / Time
📅 Date Picker
DatePickerDialog
Open a dialog used to pick a date, composed by CalendarMonthPickerView
,CalendarYearPickerView
and CalendarView
and display the date picked in a CalendarDisplayDate
.
Properties
date date
: Date picked by the userdate from
: Date of the beggining of the DatePickerView (default: 1st January of 1900)date to
: Date of the end of the DatePickerView (default: 1st January of 2100)int month
: current month displayed in the view (default: today’s month)int year
: year of the current month displayed in the view (default: today’s year)bool monthGridActive
:true
to load theCalendarMonthPickerView
component (default :false
)bool yearGridActive
:true
to load theCalendarYearPickerView
component (default :false
)bool calendarViewActive
:true
to load theCalendarView
component (default :true
)
Signals
accepted (date date)
: Signal emitted when the user pick a valid date
TextFieldDate
This TextField allows the user to select a date by editing the text field with format ‘dd/mm/yyyy’.
Properties
date date
: Date entered by the userdate from
: Start date of the calendar (default : 1st January of 1900)date to
: End date of the calendar(default : 1st January of 2100)
Signals
accepted(date date)
: Signal emitted when the date entered by the user is valid
TextFieldDatePicker
This TextField allows the user to select a date by editing the text field with format ‘dd/mm/yyyy’ or picking a date with a DatePickerDialog
deployed by clicking on a ButtonIcon ‘Calendar’.
Properties
date date
: Date entered in the text field or picked by the userdate from
: Start date of the calendar (default : 1st January of 1900)date to
: End date of the calendar(default : 1st January of 2100)
Signals
accepted(date date)
: Signal emitted when the date entered by the user is valid
⌚ Time Picker
TimePickerDialog
Dialog providing a simple way to pick an Hour. The clock style can be changed from European to Am/Pm and the hour displayed at the opening is set by the user.
Properties
hour
: hour displayed when the dialog is opened (default 0)minute
: minute displayed when the dialog is opened (default 0)showMinutes
: boolean showing minute picker (defaultfalse
)styleAm
: style of the clock, Am/Pm whentrue
European otherwise (defaultfalse
)am
: ifstyleAm
is usedtrue
if the user picked an “am” hourfalse
otherwise (defaultfalse
)
TextFieldTimePicker
This TextField allows the user to select an hour by editing the text in the field or by picking an hour in a TimePickerDialog.
Properties
hour
: hour displayed when the dialog is opened (default 0)minute
: minute displayed when the dialog is opened (default 0)styleAm
: style of the Clock, American Am/Pm style whentrue
(defaultfalse
)am
: when Am/Pm style is used, represent the time slot of the hour picked, equalfalse
when Pm (defaulttrue
)
Signal : hourAccepted(hour, minute, am)
, emitted when a correct hour is picked by the user
✏️ Advanced Use
Date Components
CalendarDateButton
Component used by CalendarDayPickerView
, CalendarYearPickerView
and CalendarMonthPickerView
CalendarWeekDayRow
Display a row of the first character of the week days. Component used by CalendarDayPicker
CalendarDayGrid
Display a day grid with a month and year given
Properties
date date
: date picked by the user.int month
: month displayed in the grid (default is today’s month)int year
: year displayed in the grid (default is today’s year)
Signal
accepted(date date)
: Signal emitted when the user pick a date
CalendarDayPickerView
Display a ListView of CalendarDayPicker
whose size and model is defined by properties from
and to
. Component used by CalendarView
.
Properties
date date
: Date picked by the userdate from
: Date of the beggining of the DatePickerView (default: 1st January of 1900)date to
: Date of the end of the DatePickerView (default: 1st January of 2100)int month
: current month displayed in the view (default: today’s month)int year
: year of the current month displayed in the view (default: today’s year)
Signals
accepted(date date)
: Signal emitted when the user pick a datemoved(int month, int year)
: Signal emitted when the user change the current view
CalendarNavigationBar
Bar composed of Qaterial.AppBarButton
and Qaterial.FlatButton
. Component used by CalendarView
Properties
int month
: Month displayed in the barint year
: Year displayed in the bar
Signals
monthClicked()
: Signal emitted when the user click on the MonthButtonyearClicked()
: Signal emitted when the user click on the YearButtonnextMonth()
: Signal emitted when the user click on the nextButtonpreviousMonth()
: Signal emitted when the user click on the previousButton
CalendarView
Display a ListView of CalendarDayPicker
whose size and model is defined by properties from
and to
. The navigation is controled by a CalendarNavigationBar
Properties
date date
: Date picked by the userdate from
: Date of the beggining of the DatePickerView (default: 1st January of 1900)date to
: Date of the end of the DatePickerView (default: 1st January of 2100)int month
: current month displayed in the view (default: today’s month)int year
: year of the current month displayed in the view (default: today’s year)
Signals
yearClicked()
: Signal emitted when the YearButton is clickedmonthClicked()
: Signal emitted when the MonthButton is clickedmoved(int month, int year)
: Signal emitted when the current view changedaccepted (date date)
: Signal emitted when the user pick a valid date
CalendarMonthPickerView
Display a GridView to choose a month. Component used by DatePickerDialog
Properties
int month
: Month choosed in the view
Signals
accepted(int month)
: Signal emitted when the user choose a month.
CalendarYearPickerView
Display a GridView to choose a year. Component used by DatePickerDialog
Properties
int year
: Year choosed in the view
Signals
accepted(int year)
: Signal emitted when the user pick a year
Time Components
EuCircularHourPicker
Allow to pick hour from 0 to 23 (Eu way)
EuCircularHourPicker
{
radius: 150
hour: 5
onAccepted: (hour) => console.log(`hour: ${hour}`)
}
Properties
radius
: (default 100)hour
: Hour of the component, can be set from outside (default 0)labelSize
: Size of text area, distance between am and pm hour circular path (default 32)
Signal
accepted
: Signal emitted at every move of the HandClock
AmCircularHourPicker
Allow to pick hour from 1 to 12 (American way)
AmCircularHourPicker
{
radius: 150
hour: 5
onAccepted: (hour) => console.log(`hour: ${hour}`)
}
Properties
radius
: (default 100)hour
: Hour of the component, can be set from outside (default 12)
Signal
accepted
: Signal emitted at every move of the HandClock
CircularMinutePicker
Allow to pick minute from 0 to 59
CircularMinutePicker
{
radius: 150
minute: 42
onAccepted: (minute) => console.log(`minute: ${minute}`)
}
Properties
radius
: (default 100)minute
: Minute of the component, can be set from outside (default 0)
Signal
accepted
: Signal emitted at every move of the HandClock
CircularPathLabel
Display data in a circular path, is able to highlight an element
CircularPathLabel
{
radius: 150
numberOfElement: 5
model: ["0", "1", "2", "3", "4"]
currentIndex: 3
}
Properties
radius
: (default 100)model
: Table of values displayed in the path (default, hours of the day)numberOfElement
: Number of values display in circle (default 12)currentIndex
: Index of the element “highlighted” (default -1)labelSize
: Size of text area (default 32)
HandClock
Display a hand clock that is used to display which hour or minute is selected by user.
It is controlled by rotation. For example, if the HandClock
should match 6 hour, rotation should be 180.
The radius should match the radius of your CircularPathLabel
and be centered in it.
import Qaterial as Qaterial
HandClock
{
radius: 140
renderDot: false
color: Qaterial.Style.accentColor
}
Properties
color
: (default Style.accentColor)radius
: (default 100)labelSize
: Radius of the external “picker” circle (default : 32 x 2^0.5)renderDot
: Boolean which displayed or not a central circle in the external “picker” circle (defaulttrue
)
Notes
Note that there is no security on the hour/minute when you set it by yourselves. So you can set an hour like 25:-12
.