Kendo UI for Angular

Angular DateRange

  • Allow users to select a range of dates using multiple side-by-side Angular calendars.
  • Part of the Kendo UI for Angular library along with more than 100 professionally-designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a 3-million-strong developer community.
Angular UI Component Library
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Kendo UI for Angular Date Range component provides users with a sleek and intuitive interface to select a range of dates over multiple side-by-side calendars. The Angular DateRange component is comprised of two Angular DateInputs—for the start date and end date, respectively. The side-by-side calendars which display when the user focuses the component the component is the Angular MultiViewCalendar. Combining these Angular UI components into a single composite component gives developers the full power of each individual component when it comes to customization and configuration options.

    See Angular DateRange Overview demo.

    Kendo UI for Angular DateRange - Overview
  • Date Ranges

    The Kendo UI for Angular DateRange component can handle any future or past date the user provides. For scenarios that require you to limit the range of dates available to users, use the built-in Angular MultiViewCalendar min and max properties to define the earliest and latest dates that can be selected by the user.

    See Angular DateRange Date Ranges demo.

    Kendo UI for Angular DateRange - Date Ranges
  • Focused Dates

    By default, the Kendo UI for Angular DateRange always focuses today’s date. The focused date has a distinctive visual style to make it unique. You can set a different focused date through the available configuration options of the integrated Angular MultiViewCalendar.

    See Angular DateRange Focused Dates demo.

    Kendo UI for Angular DateRange - Focused Dates
  • Date Formats

    Thanks to its support for standard format strings, the built-in Angular DateInputs of the Kendo UI for Angular DateRange are ready to handle any valid date format.

    See Angular DateRange Date Formats demo.

    Kendo UI for Angular DateRange - Date Formats
  • Templates

    When you want to customize the standard look and feel of the Kendo UI for Angular DateRange needs to be customized to fit application requirements, developers can take full control over the integrated Angular DateInput and Agular MultiViewCalendar components. Each of these UI components have support for templates to achieve the desired look-and-feel.

    See Angular DateRange Templates demo.

    Kendo UI for Angular DateRange - Templates
  • Globalization

    The Kendo UI for Angular DateRange component supports globalization out of the box. This means both the Angular DateInput and MultiViewCalendar can adjust to the user locale or application settings and conform to the according formats and language requirements.

    See Angular DateRange Globalization demo.

    Kendo UI for Angular DateRange - Globalization
  • Keyboard Navigation

    The Kendo UI for Angular DateRange component enables users to select a date range using just keyboard navigation. This includes opening the popup calendars and selecting a single date or a date range or manually typing dates into each of the inputs.

  • Accessibility

    The Kendo UI for Angular DateRange is designed to be compliant with Section 508 and WAI-ARIA standards and is AAA rated with WCAG 2.0.

    Kendo UI for Angular - Calendar Accessibility
Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI