In professional enterprise systems, time is a critical data dimension. Module 4 provides specialized controls to ensure that dates and schedules are captured accurately and consistently, preventing the common "formatting headaches" found in standard web development.
All elements in this module automatically interface with the Golang backend using standard ISO strings, ensuring your MariaDB DATE and DATETIME columns remain perfectly synced.
<up-date>The standard enterprise-grade date picker. It features a clean UI and supports keyboard shortcuts for rapid entry.
Key Attributes:
label: Header text.
icon: Defaults to a calendar icon.
value: The initial date (YYYY-MM-DD).
required: Prevents form submission if empty.
Developer Recipe (Emmet):
JavaScript
up-date#invoice_date[label="Invoice Date" value="now" required]
<up-month> / <up-year>Specialized pickers for accounting periods, financial reporting, or credit card expirations where specific days are irrelevant.
<up-month>: Returns a YYYY-MM format.
<up-year>: Returns a YYYY format.
Developer Recipe:
JavaScript
// For a Financial Report Filter
up-month#report_period[label="Fiscal Month"]
+up-year#fiscal_year[label="Fiscal Year"]
<up-time>A precise time picker for tracking shifts, log entries, or appointment starts.
Key Attributes:
format: Support for 12h or 24h display.
step: Controls the minute increments (e.g., 15 for quarter-hour slots).
Developer Recipe:
JavaScript
up-time#check_in[label="Entry Time" step="5"]
<up-calendar> / <up-event-calendar>High-level views for visualizing data over a timeline.
<up-calendar>: A standard interactive month/week view.
<up-event-calendar>: Connects to an API to display "Events" (like your hfzb_exam_center_schedule).
Key Attributes:
api: The endpoint providing the event JSON (expects start, end, title).
view: Default view mode (month, week, day).
Developer Recipe:
JavaScript
// Visualizing the exam schedule
up-event-calendar#schedule[api="hfzb_exam:get_schedule" view="month"]
In your Backend JS API, remember that the platform treats these values as strings.
Use req.invoice_date directly in your SQL WHERE clauses.
For the Accounting Module, use <up-month> for "Closing Periods" to prevent users from accidentally selecting a specific day that doesn't align with your month-end logic.
Ready to move to Module 5: Media & Visual Content?