Add date pickers and formulas to your WeWeb app

Date-related UI elements and no-code formulas 

The Date extension plugin allows you to handle scheduling, filter by date range, and transform timestamps into user-friendly formats:

• Add a date picker for single-date selection
• Add a date range picker for start/end date selection
• Support common picker patterns like multiple dates and date + time (depending on the element’s configuration)
• Format dates for display (e.g., MMM D, YYYY, YYYY-MM-DD, localized formats)
• Manipulate dates with formulas (add/subtract time, compare dates, get “start of” / “end of” periods)
• Use date pickers as inputs for filters, forms, and workflows
• Standardize date handling across teams with shared formulas and reusable components

What WeWeb supports natively

Why use WeWeb with Date:

WeWeb + Date gives you both the UI layer and the logic layer to work with dates in a consistent way across pages, collections, and workflows.

Perfect for:

• A client portal where users filter invoices by billing period or custom date range
• A booking or scheduling app with availability windows and time-based rules
• A CRM where teams filter leads by last contact date and compute next follow-up
• An admin dashboard that formats timestamps consistently and shows “last updated” relative views
• An internal tool that validates deadlines and routes tasks based on SLA dates

And more…

Integrating Date with WeWeb

Integrating Date with WeWeb is straightforward:

1. In the WeWeb Editor, open Plugins
2. Go to the Extensions
3. Select Date and click Add
4. Add date picker elements from the Elements panel (single date, range, or date/time variants)
5. Use date formulas in bindings and workflows to format, compare, or manipulate date values

Learn more about Date formulas

Best practices

• Pick one internal format for stored dates (commonly ISO 8601) and stick to it across collections and APIs
• Be explicit about timezones when your app spans regions: decide whether dates represent a user’s local time or a fixed timezone
• Use formulas to keep formatting consistent, instead of formatting dates differently on each page
• When filtering datasets, normalize values first (e.g., compare “start of day” to “end of day” for inclusive ranges)

FAQs

1. How do I add a Date Picker to a WeWeb form?

Enable the Date extension and drag a Date Picker element onto your page from the elements panel. ​Bind its value to a variable or form field so the selected date (or range) is available in workflows and submissions.

2. What selection modes are supported by the Date Picker?

The Date Picker supports single date, date range, and multi‑date selection. It can also be configured in date‑only, time‑only, datetime, month, or year modes depending on the use case.​

3. How can I restrict which dates users can pick?

You can set minimum and maximum dates, disable specific dates or weekdays, and limit the number of selected dates in multi‑date mode. For ranges, modes like Auto and Min/Max let you control the minimum or maximum distance between start and end dates.​

4. How do I format dates for display or APIs without writing JavaScript?

Use date formulas like formatDate and toDateISO, which rely on Day.js under the hood. These formulas can be used directly in bindings to show human-readable dates in the UI or send ISO strings to your backend.​

5. Can I handle time zones and “time ago” labels natively?

Yes, getBrowserTimezone exposes the user’s timezone, and toTime returns relative strings such as “2 months ago” or “in 10 minutes”. Both are available in the formula system so you can build timezone‑aware displays and activity feeds without custom code.