RangeDatePicker¶

RangeDatePicker element is element with 2 inputs with date type.

example

<input type="date" name="from">
<input type="date" name="to">

range-date-picker

Options¶

min¶

string Optional parameter. Parameter represents minimal date from which user can pick date. Date must be in format: YYYY-mm-dd.

max¶

string Optional parameter. Parameter represents maximum date to which user can pick date. Date must be in format: YYYY-mm-dd.

JSON

{
"options":
    {
      "min" : "2023-01-23",
      "max" : "2024-10-14"
    }
}

Build-in Validators¶

Element validates if given values are dates in format YYYY-mm-dd.

Available Validators¶

Element does not have available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "rangeDatePicker",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : string,
  "<element_options>" : {
    "<element_options_min>" : string,
    "<element_options_max>" : string
  }
}

example

{
  "type" : "rangeDatePicker",
  "name" : "dateRange",
  "label" : "Pick dates",
  "isRequired" : true,
  "isHidden" : false,
  "defaultValue" : ["2023-10-23", "2023-10-28"],
  "options" : { "min" : "2023-10-01" , "max" : "2023-10-31" }
}

Element value¶

usage in module TWIG

{% if moduleConfig.dateRange %}
    <ul>
        <li>FROM: {{ moduleConfig.dateRange.0 }}</li>
        <li>To: {{ moduleConfig.dateRange.1 }}</li>
   </ul>
{% endif %}

html output

<ul>
    <li>FROM: 2023-10-23</li>
    <li>To: 2023-10-28</li>
</ul>

Example of module¶

Twig¶

Twig

{% if moduleConfig.dateRange %}
    <p>{{ translate("Promotion valid from") }} {{ moduleConfig.dateRange.0 }} {{ translate("to") }} {{ moduleConfig.dateRange.1 }}</p>
{% endif %}

JSON configuration¶

JSON configuration

[
  {
    "label": "Promotion dates",
    "state": "unfolded",
    "elements": [
      {
        "name": "dateRange",
        "type": "rangeDatePicker",
        "label": "Pick dates",
        "isRequired": true,
        "defaultValue": ["2023-10-23", "2023-10-28"],
        "options": { "min": "2023-10-01", "max": "2023-10-31" }
      }
    ]
  }
]

JSON translations¶

JSON translations

{
  "module": {
    "pl_PL": {
      "Promotion valid from": "Promocja obowiązuje od",
      "to": "do"
    },
    "en_US": {
      "Promotion valid from": "Promotion valid from",
      "to": "to"
    }
  },
  "schema": {
    "pl_PL": {
      "Promotion dates": "Daty promocji",
      "Pick dates": "Wybierz daty"
    },
    "en_US": {
      "Promotion dates": "Promotion dates",
      "Pick dates": "Pick dates"
    }
  }
}