v2.14
3.12 3.11 3.10 3.9 3.8 2.14 1.0
Version: 2.14
3.12 3.11 3.10 3.9 3.8 2.14 1.0
Revision: Fri, 17 May 2024 13:03:36 GMT
v2.14 – outdated
This version of the documentation is outdated. Consider upgrading your project to Spiral Framework 3.12
Edit this page

Forms: Datepicker

UI component for autocomplete to use in forms

They are located in toolkit bundle, that can be included like so:

xhtml
<use:bundle path="toolkit:bundle"/>

This is also automatically included when using

xhtml
<use:bundle path="keeper:bundle"/>

See Usage Samples in demo repository

Native date picker form:date

xhtml
<form:date
        name="date"
        label="Native Date Picker"
        value=""
        size="6"
/>

Renders a native type=date element with no additional functionality or extended browser support

JavaScript date picker form:date-js

xhtml
<form:date-js
        name="date1"
        label="Date"
        value="2020-10-29T14:14:14+0300"
        size="6"
/>

Renders a JS powered datepicker with extended functionality. Format tokens are inherited from Luxon

Parameter Required Default Description
name yes - Field name to use
placeholder no - Placeholder for input
disabled no - Render input as disabled
value no - Provide pre-populated value. Should match format use for server-client communication.
format no yyyy-MM-dd'T'HH:mm:ssZZZ Format expected from server and format that is used to send data to server. Does not affect how date looks like in input.
display-format no yyyy LLL dd Format used to display in datepicker input.
enable-time no false Enables time input. It's developer responsibility to change display format to have hours and minutes displayed.
force-confirm-button no false Force showing Apply button. It's recommended for calendars with time pickers
no-calendar no false Remove calendar and use only time picker. You may want to change format options to send time only as default sends full date

Date

JavaScript date range picker form:date-range-double

xhtml
<form:date-range-double
        startName="date1"
        endName="date1"
        label="Date"
        startValue="2020-10-29T14:14:14+0300"
        endValue="2020-10-29T14:14:14+0300"
        size="6"
/>

Renders a JS powered date range picker with extended functionality. Format tokens are inherited from Luxon

Parameter Required Default Description
startName yes - Field name to use for first input
startValue no - Provide pre-populated value for first input. Should match format use for server-client communication.
endName yes - Field name to use for second input
endValue no - Provide pre-populated value for second input. Should match format use for server-client communication.
disabled no - Render input as disabled
format no yyyy-MM-dd'T'HH:mm:ssZZZ Format expected from server and format that is used to send data to server. Does not affect how date looks like in input.
display-format no yyyy LLL dd Format used to display in datepicker input.
enable-time no false Enables time input. It's developer responsibility to change display format to have hours and minutes displayed.
force-confirm-button no false Force showing Apply button. It's recommended for calendars with time pickers
no-calendar no false Remove calendar and use only time picker. You may want to change format options to send time only as default sends full date

Date Range