DateRangePicker

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.
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-child-component	Boolean
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.
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.
fill-mode	FillMode	Sets a value controlling how the color is applied.
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.
labels	Boolean	Determines if the labels for the inputs will be visible.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
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.
has-client-component	Boolean
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
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.