New to Telerik UI for JSP? Download free 30-day trial

<kendo:dateRangePicker>

A JSP wrapper for Kendo UI DateRangePicker.

Configuration Attributes

ARIATemplate java.lang.String

Specifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar..The parameters available for the template are: current - The current focused date.; valueType - The focused item value type - month, year and etc. or text - A text representing the focused value..

Example

<kendo:dateRangePicker ARIATemplate="ARIATemplate">
</kendo:dateRangePicker>

culture java.lang.String

Specifies the culture info used by the widget.

Example

<kendo:dateRangePicker culture="culture">
</kendo:dateRangePicker>

dates java.lang.Object

Specifies a list of dates, which will be passed to the month template.

Example

<kendo:dateRangePicker dates="dates">
</kendo:dateRangePicker>

depth java.lang.String

Specifies the navigation depth. The following settings are available for the depth value: "month" - Shows the days of the month. (default value); "year" - Shows the months of the year.; "decade" - Shows the years of the decade. or "century" - Shows the decades from the century..

Example

<kendo:dateRangePicker depth="depth">
</kendo:dateRangePicker>

disableDates java.lang.Object

An array or function that will be used to determine which dates to be disabled for selection by the widget.

Example

<kendo:dateRangePicker disableDates="disableDates">
</kendo:dateRangePicker>

endField java.lang.String

Specifies the end field name for model binding.

Example

<kendo:dateRangePicker endField="endField">
</kendo:dateRangePicker>

fillMode java.lang.String

Sets a value controlling how the color is applied.

Example

<kendo:dateRangePicker fillMode="fillMode">
</kendo:dateRangePicker>

The template which renders the footer of the calendar. If false, the footer will not be rendered.

Example

<kendo:dateRangePicker footer="footer">
</kendo:dateRangePicker>

format java.lang.String

Specifies the format, which is used to format the value of the DateRangePicker displayed in the input. The format also will be used to parse the input.For more information on date and time formats please refer to Date Formatting.

Example

<kendo:dateRangePicker format="format">
</kendo:dateRangePicker>

labels boolean

Determines if the labels for the inputs will be visible.

Example

<kendo:dateRangePicker labels="labels">
</kendo:dateRangePicker>

max java.util.Date

Specifies the maximum date, which the calendar can show.

Example

<kendo:dateRangePicker max="max">
</kendo:dateRangePicker>

min java.util.Date

Specifies the minimum date that the calendar can show.

Example

<kendo:dateRangePicker min="min">
</kendo:dateRangePicker>

rounded java.lang.String

Sets a value controlling the border radius.

Example

<kendo:dateRangePicker rounded="rounded">
</kendo:dateRangePicker>

size java.lang.String

Sets the size of the component.

Example

<kendo:dateRangePicker size="size">
</kendo:dateRangePicker>

start java.lang.String

Specifies the start view. The following settings are available for the start value: "month" - Shows the days of the month.; "year" - Shows the months of the year.; "decade" - Shows the years of the decade. or "century" - Shows the decades from the century..

Example

<kendo:dateRangePicker start="start">
</kendo:dateRangePicker>

startField java.lang.String

Specifies the start field name for model binding.

Example

<kendo:dateRangePicker startField="startField">
</kendo:dateRangePicker>

weekNumber boolean

If set to true a week of the year will be shown on the left side of the calendar. It is possible to define a template in order to customize what will be displayed.

Example

<kendo:dateRangePicker weekNumber="weekNumber">
</kendo:dateRangePicker>

Configuration JSP Tags

kendo:dateRangePicker-messages

Allows localization of the strings that are used in the widget.

More documentation is available at kendo:dateRangePicker-messages.

Example

<kendo:dateRangePicker>
    <kendo:dateRangePicker-messages></kendo:dateRangePicker-messages>
</kendo:dateRangePicker>

kendo:dateRangePicker-month

Templates for the cells rendered in the calendar "month" view.

More documentation is available at kendo:dateRangePicker-month.

Example

<kendo:dateRangePicker>
    <kendo:dateRangePicker-month></kendo:dateRangePicker-month>
</kendo:dateRangePicker>

kendo:dateRangePicker-range

Configures the Kendo UI DateRangePicker range settings.

More documentation is available at kendo:dateRangePicker-range.

Example

<kendo:dateRangePicker>
    <kendo:dateRangePicker-range></kendo:dateRangePicker-range>
</kendo:dateRangePicker>

Event Attributes

change String

Fires when the selected date is changed

For additional information check the change event documentation.

Example

<kendo:dateRangePicker change="handle_change">
</kendo:dateRangePicker>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

close String

Fires when the calendar is closed

For additional information check the close event documentation.

Example

<kendo:dateRangePicker close="handle_close">
</kendo:dateRangePicker>
<script>
    function handle_close(e) {
        // Code to handle the close event.
    }
</script>

open String

Fires when the calendar is opened

For additional information check the open event documentation.

Example

<kendo:dateRangePicker open="handle_open">
</kendo:dateRangePicker>
<script>
    function handle_open(e) {
        // Code to handle the open event.
    }
</script>

Event Tags

kendo:dateRangePicker-change

Fires when the selected date is changed

For additional information check the change event documentation.

Example

<kendo:dateRangePicker>
    <kendo:dateRangePicker-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:dateRangePicker-change>
</kendo:dateRangePicker>

kendo:dateRangePicker-close

Fires when the calendar is closed

For additional information check the close event documentation.

Example

<kendo:dateRangePicker>
    <kendo:dateRangePicker-close>
        <script>
            function(e) {
                // Code to handle the close event.
            }
        </script>
    </kendo:dateRangePicker-close>
</kendo:dateRangePicker>

kendo:dateRangePicker-open

Fires when the calendar is opened

For additional information check the open event documentation.

Example

<kendo:dateRangePicker>
    <kendo:dateRangePicker-open>
        <script>
            function(e) {
                // Code to handle the open event.
            }
        </script>
    </kendo:dateRangePicker-open>
</kendo:dateRangePicker>
In this article
Related articles
Not finding the help you need?