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>