date

---

The date and datetime property renders a calendar-style date picker or date-time picker in the Page Builder UI. It allows the user to select a specific date (or date and time), which is saved as a standardized string in l.settings:instance.

Date Definition

{
  "code": "event_date",
  "prompt": "Event Date",
  "type": "date",
  "required": true,
  "min": "2025-01-01",
  "max": "2025-12-31"
}

Supported Fields

Field	Type	Required	Description
code	string	Yes	Unique key used in l.settings:instance.
prompt	string	Yes	Label shown in the admin interface.
type	string	Yes	Must be "date" or "datetime".
required	boolean	No	If true, the user must select a date.
min	string	No	Minimum allowed date (YYYY-MM-DD or YYYY-MM-DDTHH:MM).
max	string	No	Maximum allowed date.
serverdate	boolean	No	If true, sets value to server’s current date/time on creation.
validation_pattern	string	No	Regex used for custom validation.
validation_message	string	No	Message shown if validation fails.
preview_property_selector	string	No	Target element for PageBuilder Inspector.
visibility_conditions	object	No	Shows/hides field based on logic.

l.settings:instance Structure

:event_date:value=2025-06-15

For datetime, the format will be:

:event_date:value=2025-06-15T13:45

Template Usage

<p>Launch Date: &mvte:instance:event_date:value;</p>

<mvt:if expr="l.settings:instance:event_date:value EQ '2025-06-15'">
  <p>Launches June 15</p>
</mvt:if>

JavaScript Access

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  var launch = instance.event_date.value;
</script>

defaults Definition

You can assign a pre-selected value in the defaults block using ISO 8601 format:

"defaults": {
  "event_date": {
    "value": "2025-06-01"
  }
}

Best Practices

• Use type: "datetime" only if you need time precision.
• Always provide a min/max range for admin validation.
• Store all values using ISO 8601 format (YYYY-MM-DD or YYYY-MM-DDTHH:MM).
• Use serverdate: true to auto-initialize the value on first render (not on every page load).

Complete Example

{
  "code": "registration_deadline",
  "prompt": "Registration Deadline",
  "type": "date",
  "required": true,
  "min": "2025-01-01",
  "max": "2025-12-31"
}

Output

:registration_deadline:value=2025-09-15

Template

<p>Register by &mvte:instance:registration_deadline:value;</p>