QMLQT QUICK · C++ · PYTHON
Build desktop interfaces with QML components, shared tokens and practical examples you can run yourself.
QML Core is a separate product. C++ and Python hosts share the same QML screens.
QML CORE
56 of 56 components
START WITH A WORKING APP
Unzip the SDK and use a Qt kit compatible with the plugin edition.
cmake -S examples/cmake-app -B build -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH=C:/Qt/6.12.0/msvc2022_64 -DCMAKE_MSVC_DEBUG_INFORMATION_FORMAT=Embedded -DCMAKE_POLICY_DEFAULT_CMP0141=NEW
cmake --build build
build/syidax-example --license your.license.json --example workbenchUse the pure QML edition. Select your binding explicitly.
python -m venv .venv
.venv/Scripts/python -m pip install -r examples/python-app/requirements-pyside6.txt
.venv/Scripts/python examples/python-app/main.py --binding pyside6 --license your.license.json --example recordsRun with --diagnose --json to check your Qt version, import path, fonts, runtime and license. No license token is printed.
The Gallery evaluation app is available now. Paid SDK sales and downloads are coming soon. The installation examples above preview the SDK workflow.
Native window and example smoke checks cover the versions below. Qt 6.8 is a source minimum, not a promise of tested support for every Qt release. Gallery uses software rendering.
Step-by-step captures from the running Windows applications. Play, pause and inspect each state.
TRY IT YOURSELF
Browse examples, inspect properties and switch between light and dark themes in a Windows application. The Gallery is for evaluation; commercial SDK access is separate.
Download Gallery · Windows x64$24.99 / month
$249.99 / year per developer
Same regular unit price as Chart. The same price applies to first purchases, additional seats and renewals.
Documentation, runnable examples and diagnostics are included. Individual technical support, onboarding and SLAs are not provided.
View purchase and license terms →The --qml path must contain the Syidax folder. Python uses qml-pure. Run from the unzipped SDK, independently of the source repository.
Download your QML Core certificate and pass it with --license. Web Core, Chart and Grid certificates do not activate QML. Monthly use ends at expiry. Annual licenses retain only releases covered by their update period.
Check the Qt version and architecture used to build plugins. Do not mix Python Qt bindings. qml-pure removes the compiled plugin ABI dependency.
PDF requires the optional QtQuick.Pdf module. Other Core components remain usable without it. For icon packs and resource paths, read SDK docs/ICON-PACKS.md.
Examples write only to their application-data folder. Check permissions and disk space. Invalid JSON is backed up before reset. A failed save preserves your draft.
Choose a date, date range or time through a calendar and time controls.
import Syidax.Core.Datepicker
| Type | Definition / role |
|---|---|
| Date grid with day, month, year and decade navigation. | |
| Scrolling hour, minute and second columns with confirmation. | |
| Combines date and time selection with one confirmation button. | |
| Two calendars for choosing the start and end of a date range. | |
| Inline calendar shell selecting date, datetime, range or time content by variant. | |
| Form field for entering a date, time or range and opening its calendar. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
SyDatepicker is a form field: a text box with a calendar glyph that opens, under it, the calendar for its variant
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string mode: "day"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "Birthday"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}variant picks the calendar the box opens and what the field holds.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SyDatepicker { id: exampleControl1; label: "Birthday"; year: "2026"; month: "10"; day: "9" }
SyDatepicker { label: "Appointment"; variant: "datetime"; year: "2026"; month: "10"; day: "9"; hour: "14"; minute: "30" }
SyDatepicker { label: "Period"; variant: "range" }
SyDatepicker { label: "Alarm"; variant: "time"; hour: "7"; minute: "0" }
}
}mode is the unit the user picks.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SyDatepicker { id: exampleControl1; mode: "day"; year: "2026"; month: "10"; day: "9" }
SyDatepicker { mode: "month"; format: "yyyy-MM"; year: "2026"; month: "10"; day: "1" }
SyDatepicker { mode: "year"; format: "yyyy"; year: "2026"; month: "1"; day: "1" }
}
}format shapes the text in the box and what typing is parsed against.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string format: "dd/MM/yyyy"
}
SyDatepicker { id: exampleControl1; format: storyArgs.format; year: "2026"; month: "10"; day: "9" }
}Compare the configuration and result of SyCalendar · dateNames · mondayStart · hideWeekend.
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string dateNames: "Su,Mo,Tu,We,Th,Fr,Sa"
property bool mondayStart: false
property bool hideWeekend: false
}
Column {
spacing: 12
Rectangle {
width: calendar.width + 2
height: calendar.height + 2
color: Theme.semantic.backgroundDefault
border.width: 1
border.color: Theme.semantic.borderSubtle
radius: Foundation.borderRadiusMedium
SyCalendar {
id: calendar
x: 1
y: 1
variant: storyArgs.variant
datetime: ({ year: 2026, month: 10, day: 9, hour: 9, minute: 0, second: 0 })
dateNames: storyArgs.dateNames
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
onSelected: (detail) => output.log(JSON.stringify(detail))
}
}
EventLog { id: output }
}
}disabled draws the disabled tones; the boxes take no focus or typing, the calendar never opens and the clear × is hidden.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 12
SyDatepicker { id: featureTarget0; visible: true; year: "2026"; month: "10"; day: "9"; disabled: true }
SyDatepicker { id: featureTarget1; visible: true; year: "2026"; month: "10"; day: "9"; readonly: true }
SyDatepicker { visible: true; id: due; label: "Due date"; required: true }
SyButton { visible: true; text: "due.reportValidity()"; variant: "secondary"; size: "small"; onClicked: due.reportValidity() }
}
}changed(detail) carries the text whenever it is applied: a calendar pick, a typed date committed with Enter or by leaving the box, or a clear (the × or an emptied box, value: "").
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 12
SyDatepicker { id: exampleControl1;
label: "Birthday"
onChanged: (detail) => { if (true) { output.log(("changed: %1").arg(detail.value)) } }
onSelected: (detail) => { if (true) { output.log(("selected: %1").arg(detail.year + "-" + detail.month + "-" + detail.day)) } }
}
SyDatepicker {
label: "Period"; variant: "range"
onChanged: (detail) => { if (true) { output.log(("changed (%1): %2").arg(detail.mode).arg(detail.value)) } }
}
EventLog { id: output }
}
}openCalendar() opens the calendar under the box (ignored while disabled, readonly or already open); closeCalendar() closes it.
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 12
Item {
width: 560; height: 420
SyDatepicker {
x: 24; y: 24
id: start; label: "Start date"; required: true }
}
Flow {
objectName: "exampleCommands"
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "start.openCalendar()"; variant: "secondary"; size: "small"; onClicked: start.openCalendar() }
SyButton { id: exampleControl2; visible: true; text: "start.closeCalendar()"; variant: "secondary"; size: "small"; onClicked: start.closeCalendar() }
SyButton { id: exampleControl3; visible: true; text: "start.setFocus()"; variant: "secondary"; size: "small"; onClicked: start.setFocus() }
SyButton { id: exampleControl4; visible: true; text: "start.checkValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("checkValidity() → " + start.checkValidity()) }
SyButton { id: exampleControl5; visible: true; text: "start.reportValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("reportValidity() → " + start.reportValidity()) }
SyButton { id: exampleControl6; visible: true; text: "start.getStatus()"; variant: "secondary"; size: "small"; onClicked: output.log("getStatus() → " + JSON.stringify(start.getStatus())) }
}
Text {
text: "start.value === " + JSON.stringify(start.value)
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
EventLog { id: output }
}
}Choose a month, configured with mode.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string mode: "month"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "Birthday"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}Choose a year, configured with mode.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string mode: "year"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "Birthday"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}Workweek calendar, configured with mondayStart, hideWeekend.
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string dateNames: "Su,Mo,Tu,We,Th,Fr,Sa"
property bool mondayStart: true
property bool hideWeekend: true
}
Column {
spacing: 12
Rectangle {
width: calendar.width + 2
height: calendar.height + 2
color: Theme.semantic.backgroundDefault
border.width: 1
border.color: Theme.semantic.borderSubtle
radius: Foundation.borderRadiusMedium
SyCalendar {
id: calendar
x: 1
y: 1
variant: storyArgs.variant
datetime: ({ year: 2026, month: 10, day: 9, hour: 9, minute: 0, second: 0 })
dateNames: storyArgs.dateNames
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
onSelected: (detail) => output.log(JSON.stringify(detail))
}
}
EventLog { id: output }
}
}Date range, configured with variant.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "range"
property string mode: "day"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "Birthday"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}Time only, configured with variant.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "time"
property string mode: "day"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "Birthday"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}Display format, configured with format, variant.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "datetime"
property string mode: "day"
property string format: "dd/MM/yyyy hh:mm"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "Birthday"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}Compare the untouched field, validation error and reset result.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyDatepicker {
id: field; width: parent.width; name: "selection"; required: true
label: "Required selection"
error: "Complete this field before continuing."
}
Row {
spacing: 8
SyButton { id: check; text: "Validate"; onClicked: field.reportValidity() }
SyButton { id: reset; text: "Reset"; onClicked: field.reset() }
}
Text { text: "Status: " + (field.invalid ? "Invalid" : "Ready"); color: Theme.semantic.textDefault }
}Show an application-specific error, then reset the field.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyDatepicker {
id: field; width: parent.width; name: "selection"; required: true
label: "Required selection"
datetime: ({year: 2026, month: 10, day: 15})
error: "This selection is currently unavailable. Choose another."
}
Row {
spacing: 8
SyButton { id: check; text: "Show error"; onClicked: field.setCustomError() }
SyButton { id: reset; text: "Reset"; onClicked: field.reset() }
}
Text { text: "Status: " + (field.invalid ? "Invalid" : "Ready"); color: Theme.semantic.textDefault }
}Hover or select an item for its QML example and copy button.
SyDatepicker| Property | Type | Default | Description |
|---|---|---|---|
| string | "date" | date · datetime · range · time — the surface and the shape of the value. | |
| string | "day" | day · month · year — the unit the user picks in the calendar. | |
| string | "yyyy-MM-dd hh:mm:ss" | Display and parse format: yyyy yy MM dd hh mm ss. date drops the time part, time keeps only it. | |
| string | "" | The initial date, read once at creation (when year is set; hour for the time variant). | |
| string | "" | The initial date, read once at creation (when year is set; hour for the time variant). | |
| string | "" | The initial date, read once at creation (when year is set; hour for the time variant). | |
| string | "" | The initial date, read once at creation (when year is set; hour for the time variant). | |
| string | "" | The initial date, read once at creation (when year is set; hour for the time variant). | |
| string | "" | The initial date, read once at creation (when year is set; hour for the time variant). | |
| object | null | { year, month, day, hour, minute, second } of the selection (single variants). Read it; set it with applyDate(). | |
| object | null | { year, month, day } of the range ends. Set them with applyRange(). | |
| object | null | { year, month, day } of the range ends. Set them with applyRange(). | |
string or [start, end] (read-only binding) | — | The displayed text in format; what the form submits. | |
| string | "" | The texts of the boxes (endText only for the range). | |
| string | "" | The texts of the boxes (endText only for the range). | |
| string | "start" | Which range box is being edited: start · end; the mode in the range's changed. | |
| string | "" | Replaces the format-derived placeholder (not used by the range boxes). | |
| string | "Su,Mo,Tu,We,Th,Fr,Sa" | Seven comma-separated day names, Sunday first. | |
| bool | false | The week starts on Monday. | |
| bool | false | Five columns, no Saturday / Sunday. | |
| bool | false | Readable, no typing, no calendar; always valid. | |
| bool (read-only) | — | The calendar popup is open. | |
| bool (read-only) | — | variant === "range". | |
| bool (read-only) | — | A box has focus or the calendar is open | |
| bool (read-only) | — | the pointer is over the box. | |
| string (read-only) | — | The placeholder actually shown. | |
| string | "" | The frame's title, form key, helper text and custom error copy. | |
| string | "" | The frame's title, form key, helper text and custom error copy. | |
| string | "" | The frame's title, form key, helper text and custom error copy. | |
| string | "" | The frame's title, form key, helper text and custom error copy. | |
| string | "medium" | small · medium · large — box height 24 / 32 / 40 px. | |
| bool | false | Disabled tones and no interaction | |
| bool | false | a missing date is valueMissing. | |
| read-only | — | Validity: "" · valueMissing · custom; invalid once touched or reported. | |
| read-only | — | Validity: "" · valueMissing · custom; invalid once touched or reported. | |
| read-only | — | Validity: "" · valueMissing · custom; invalid once touched or reported. | |
| real | 200 (300 for the range) | The width when the app sets none. |
SyCalendar (the shell the field opens; inline-capable)| Property | Type | Default | Description |
|---|---|---|---|
| string | "date" | Which surface to load: date · datetime · range · time. | |
| string | "day" | day · month · year — the unit to pick (passed to the surface). | |
| string | "yyyy-MM-dd hh:mm:ss" | Only its time part matters here: which time columns show. | |
| object | null | The selection to show for date · datetime · time. | |
| object | null | The range to show. | |
| object | null | The range to show. | |
| string | "Su,Mo,…" | The grid, passed to the surface. | |
| bool | false | The grid, passed to the surface. | |
| bool | false | The grid, passed to the surface. |
SyDateCalendar (one month grid with its header)| Property | Type | Default | Description |
|---|---|---|---|
| object | null | The selected date (highlighted); its time parts are copied into selected. | |
| string | "day" | What the grid shows now: day · month · year · decade; the title click goes up, picks go down. | |
| string | "day" | The finest unit the user picks: day · month · year. A pick at that level emits selected. | |
| int | today | The month on screen. | |
| int | today | The month on screen. | |
| string | "" | "start" / "end" turn on range drawing (shading, entered); empty = single. | |
| object | null | The range and the day under the pointer, for the shading. | |
| object | null | The range and the day under the pointer, for the shading. | |
| object | null | The range and the day under the pointer, for the shading. | |
| string | "Su,Mo,…" | Day names (Sunday first), Monday start, five columns. | |
| bool | false | Day names (Sunday first), Monday start, five columns. | |
| bool | false | Day names (Sunday first), Monday start, five columns. | |
| bool | true | The footer with the Now button (day mode, single). | |
| read-only | — | Today's parts, the header text, the 42 cells on screen, the weekday order, the column count, 32. | |
| read-only | — | Today's parts, the header text, the 42 cells on screen, the weekday order, the column count, 32. | |
| read-only | — | Today's parts, the header text, the 42 cells on screen, the weekday order, the column count, 32. | |
| read-only | — | Today's parts, the header text, the 42 cells on screen, the weekday order, the column count, 32. | |
| read-only | — | Today's parts, the header text, the 42 cells on screen, the weekday order, the column count, 32. | |
| read-only | — | Today's parts, the header text, the 42 cells on screen, the weekday order, the column count, 32. |
SyDateTimeCalendar (grid + time columns + OK)| Property | Type | Default | Description |
|---|---|---|---|
| object | null | The selection; setting it moves the grid and the time columns. | |
| string | "day" | As on SyDateCalendar. | |
| string | "day" | As on SyDateCalendar. | |
| string | "yyyy-MM-dd hh:mm:ss" | Its part after the space names the time columns. | |
| string | "Su,Mo,…" | The grid. | |
| bool | false | The grid. | |
| bool | false | The grid. | |
| object | datetime | The date part picked so far (the time comes from the columns). |
SyRangeCalendar (two month grids for a start and an end)| Property | Type | Default | Description |
|---|---|---|---|
| object | null | The range: { year, month, day } or null. | |
| object | null | The range: { year, month, day } or null. | |
| string | "start" | Which end the next click sets: start · end (alternates after each pick). | |
| string | "day" | The grids' mode. | |
| string | "Su,Mo,…" | The grids. | |
| bool | false | The grids. | |
| bool | false | The grids. | |
| object | null | The day under the pointer while the end is still missing. | |
| int | the start's month, else today | The left grid's month; the right grid shows the following month (rightMonth). | |
| int | the start's month, else today | The left grid's month; the right grid shows the following month (rightMonth). |
SyTimepicker (the time columns)| Property | Type | Default | Description |
|---|---|---|---|
| int | 0 | The time; each pick writes one of them. | |
| int | 0 | The time; each pick writes one of them. | |
| int | 0 | The time; each pick writes one of them. | |
| string | "hh:mm:ss" | Which columns show: the hh · mm · ss tokens. | |
| string | ":" | Between the parts in the header text. | |
| bool | false | No OK button (a parent confirms instead). | |
| read-only | — | The header text and which columns exist. | |
| read-only | — | The header text and which columns exist. | |
| read-only | — | The header text and which columns exist. | |
| read-only | — | The header text and which columns exist. | |
| read-only | — | The header text and which columns exist. |
SyDatepicker| Method | Description |
|---|---|
| Opens the calendar popup. Ignored while disabled, readonly or already open. | |
| Closes it. | |
| Focuses the start box (which opens the calendar) | |
| removes focus from both boxes and closes the calendar. | |
Helper: sets datetime and the text from { year, month, day, hour, minute, second } without emitting changed. | |
Helper: sets both range ends ({ year, month, day } or null) and their texts without emitting changed. | |
Clears the date (both ends in the range), marks the field touched and emits changed with "" — what the clear × does. | |
Whether the status is "", silently | |
| the same and reveals the error line. | |
"", "valueMissing" or "custom". | |
Forces the custom status | |
| clears it. | |
Clears the date (emits changed) and the touched / submitted / custom flags. |
| Item | Behavior / conditions |
|---|---|
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next() (a month in day mode, a year / decade / century above), previousFar() / nextFar() (a year in day mode), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up() (one level up), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
current() returns the parts as they stand; confirm() emits selected with closable: true (OK). | |
current() returns the parts as they stand; confirm() emits selected with closable: true (OK). | |
pick({ year, month, day }) applies a click; entered(day) updates the hover shading. | |
pick({ year, month, day }) applies a click; entered(day) updates the hover shading. | |
pick(part, value) sets "hour" / "minute" / "second" and emits changed + selected; confirm() emits selected with closable: true; scrollToSelection() scrolls the columns to the current time. | |
pick(part, value) sets "hour" / "minute" / "second" and emits changed + selected; confirm() emits selected with closable: true; scrollToSelection() scrolls the columns to the current time. | |
pick(part, value) sets "hour" / "minute" / "second" and emits changed + selected; confirm() emits selected with closable: true; scrollToSelection() scrolls the columns to the current time. |
SyDatepicker| Signal | Arguments | When |
|---|---|---|
detail: { value } · range: { mode, value } | The text was applied: a calendar pick, a typed date on Enter / blur, a clear (""). mode is "start" or "end". Not for the initial date, not for rejected text. | |
detail: { year, month, day, hour, minute, second [, closable] } · range: { rangestart, rangeend } | The calendar picked (after changed). closable is true on OK in datetime / time. Range ends are { year, month, day } or null. | |
detail: { value, isValid, status } | A box gained / lost focus; blur commits the text and marks the field touched. | |
detail: { value, isValid, status } | A box gained / lost focus; blur commits the text and marks the field touched. |
| Item | Behavior / conditions |
|---|---|
selected(detail) forwards the surface's detail; closed() when the surface asks to close (a day pick, OK, a complete range). | |
selected(detail) forwards the surface's detail; closed() when the surface asks to close (a day pick, OK, a complete range). | |
selected({ year, month, day, hour, minute, second }) on a pick at pickerMode level or Now; changed({ year, month }) when the month on screen changes through the arrows; entered({ year, month, day }) when a day is hovered in range mode. | |
selected({ year, month, day, hour, minute, second }) on a pick at pickerMode level or Now; changed({ year, month }) when the month on screen changes through the arrows; entered({ year, month, day }) when a day is hovered in range mode. | |
selected({ year, month, day, hour, minute, second }) on a pick at pickerMode level or Now; changed({ year, month }) when the month on screen changes through the arrows; entered({ year, month, day }) when a day is hovered in range mode. | |
selected({ closable, year, month, day, hour, minute, second }) on every day or time pick and Now (closable: false) and on OK (closable: true). | |
selected({ rangestart, rangeend }) after every pick. | |
changed({ hour, minute, second }) on every pick; selected({ closable, hour, minute, second }) on every pick (closable: false) and on OK (closable: true). | |
changed({ hour, minute, second }) on every pick; selected({ closable, hour, minute, second }) on every pick (closable: false) and on OK (closable: true). |
| Item | Behavior / conditions |
|---|---|
give it as strings: year, month, day and, for the time variants, hour, minute, second. They are read once, when the field is created, and only when year is set (the time variant: when hour is set); missing parts default to 1 for month / day and 0 for the time, the time variant takes today's date; an impossible date is ignored. datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
give it as strings: year, month, day and, for the time variants, hour, minute, second. They are read once, when the field is created, and only when year is set (the time variant: when hour is set); missing parts default to 1 for month / day and 0 for the time, the time variant takes today's date; an impossible date is ignored. datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
give it as strings: year, month, day and, for the time variants, hour, minute, second. They are read once, when the field is created, and only when year is set (the time variant: when hour is set); missing parts default to 1 for month / day and 0 for the time, the time variant takes today's date; an impossible date is ignored. datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
give it as strings: year, month, day and, for the time variants, hour, minute, second. They are read once, when the field is created, and only when year is set (the time variant: when hour is set); missing parts default to 1 for month / day and 0 for the time, the time variant takes today's date; an impossible date is ignored. datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
give it as strings: year, month, day and, for the time variants, hour, minute, second. datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
give it as strings: year, month, day and, for the time variants, hour, minute, second. datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
Helper: sets datetime and the text from { year, month, day, hour, minute, second } without emitting changed. | |
Helper: sets both range ends ({ year, month, day } or null) and their texts without emitting changed. | |
{ year, month, day, hour, minute, second } of the selection (single variants). Read it; set it with applyDate(). | |
datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
datetime is { year, month, day, hour, minute, second } (numbers) or null; the range keeps rangestart and rangeend as { year, month, day } or null. | |
The displayed text in format; what the form submits. | |
value is the displayed text — startText in format, or [startText, endText] for the range — and is what SyForm.values() submits. | |
Display and parse format: yyyy yy MM dd hh mm ss. date drops the time part, time keeps only it. | |
value is the displayed text — startText in format, or [startText, endText] for the range — and is what SyForm.values() submits. | |
value is the displayed text — startText in format, or [startText, endText] for the range — and is what SyForm.values() submits. | |
The text was applied: a calendar pick, a typed date on Enter / blur, a clear (""). mode is "start" or "end". Not for the initial date, not for rejected text. | |
| Opens the calendar popup. Ignored while disabled, readonly or already open. | |
| Closes it. | |
Escape, a press outside, closeCalendar(), setBlur() and the surface's own close request close it — a day pick in date, OK in datetime and time, a complete pair in range. | |
The selected date (highlighted); its time parts are copied into selected. | |
"start" / "end" turn on range drawing (shading, entered); empty = single. | |
| The calendar popup is open. | |
Every pick writes the parts and the text, emits changed and then selected. | |
Every pick writes the parts and the text, emits changed and then selected. | |
SyDateCalendar draws 7 columns (5 with hideWeekend) of 32 px cells under the day names from dateNames (seven comma-separated names starting with Sunday; mondayStart rotates them); days of the neighbouring months are dimmed and clicking one jumps to that month. | |
SyDateCalendar draws 7 columns (5 with hideWeekend) of 32 px cells under the day names from dateNames (seven comma-separated names starting with Sunday; mondayStart rotates them); days of the neighbouring months are dimmed and clicking one jumps to that month. | |
SyDateCalendar draws 7 columns (5 with hideWeekend) of 32 px cells under the day names from dateNames (seven comma-separated names starting with Sunday; mondayStart rotates them); days of the neighbouring months are dimmed and clicking one jumps to that month. | |
day · month · year — the unit the user picks in the calendar. | |
| Replaces the format-derived placeholder (not used by the range boxes). | |
disabled: disabled tones, no focus, no typing, no calendar, no clear ×. | |
| Readable, no typing, no calendar; always valid. | |
The clear × shows while there is text and the field is interactive; it empties everything (both ends in the range) and emits changed with "". | |
Tone precedence: disabled > readonly > invalid > focus > hover > enabled; hasFocus is true while a box has focus or the calendar is open. | |
required and no date (range: either end missing) → valueMissing; setCustomError() → custom; disabled or readonly → always "". | |
required and no date (range: either end missing) → valueMissing; setCustomError() → custom; disabled or readonly → always "". | |
The error line shows once a box was left (touched) or after reportValidity(). | |
small · medium · large — box height 24 / 32 / 40 px. | |
| The width when the app sets none. | |
the box is size high (24 / 32 / 40 px); the width is preferredWidth — 200, or 300 for the range — unless the app sets width. |
| Item | Behavior / conditions |
|---|---|
| Keyboard: Tab and Shift+Tab enter and leave the field. Hidden and disabled fields are skipped. Escape closes an open picker before continuing. Textarea uses Tab for focus navigation, including inside a modal; it does not insert indentation. |