New to Telerik UI for ASP.NET Core? Download free 30-day trial

DateRangePickerTagHelper

Example

<kendo-daterangepicker>
    <messages />
    <month />
    <range />
</kendo-daterangepicker>

ChildTags

Tag Name Details
messages DateRangePickerMessagesSettingsTagHelper
month DateRangePickerMonthSettingsTagHelper
range DateRangePickerRangeSettingsTagHelper

Attributes

Attribute Type Description
name String Sets the name of the component.
adaptive-mode AdaptiveMode Specifies the adaptive rendering of the component.
allow-reverse Boolean Enables the user to select an end date that is before the start date.
aria-template 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..
aria-template-handler 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..
aria-template-id 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..
aria-template-view IHtmlContent 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..
as-module Boolean
auto-adjust Boolean If this property is enabled and you have configured min and/or max values, and the user enters a value that falls out of that range, the value will automatically be set to either the minimum or maximum allowed value.
auto-close Boolean Specifies whether the calendar popup should close automatically when a range is selected.
calendar-button Boolean If this configuration is enabled, a calendar button will appear inside the date inputs. This is similar to the calendar button in the DatePicker component. The calendar popup will be opened only when the button is clicked. Clicking inside the input itself will have no effect.
clear-button Boolean If this configuration is enabled, a clear button will appear in the date inputs where a date is selected. Clicking on the clear button will remove the selected date from the input.
culture String Specifies the culture info used by the widget.
dates DateTime[] Specifies a list of dates, which will be passed to the month template.
depth CalendarView 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..
disable-dates DateTime[] An array or function that will be used to determine which dates to be disabled for selection by the widget.
disable-dates-handler String Thue function that will be used to determine which dates to be disabled in the calendar.
end-field String Specifies the end field name for model binding.
fill-mode FillMode Sets a value controlling how the color is applied.
format 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.
is-in-client-template Boolean When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
deferred Boolean Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
footer String The template which renders the footer of the calendar. If false, the footer will not be rendered.
footer-handler String The template which renders the footer of the calendar. If false, the footer will not be rendered.
has-client-component Boolean
labels Boolean Determines if the labels for the inputs will be visible.
max DateTime Specifies the maximum date, which the calendar can show.
min DateTime Specifies the minimum date that the calendar can show.
on-change String Fires when the selected date is changed
on-close String Fires when the calendar is closed
on-open String Fires when the calendar is opened
rounded Rounded Sets a value controlling the border radius.
sanitize-id Boolean
script-attributes IDictionary<String,Object>
size ComponentSize Sets the size of the component.
start CalendarView 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..
start-field String Specifies the start field name for model binding.
week-number 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.
In this article
Not finding the help you need?