Igniteui-angular: Range selection for datepicker

[HristoP96]

Describe the solution you'd like

A datepicker, which could render a range selection (For example: The begin and the end of the range)

Additional context

The current datepicker's behavior is only compatible with a single selection. The users have reference to the calendar of the datepicker and can modify it every way they want. The datepicker should be compatible with the calendar's behavior or a specific calendar should be implemented only for the datepicker.

• [x] Update Range Date Picker spec
• [x] POC
• [ ] Implementation & Unit tests
  
  
  
  • [ ] Single component (readonly in drop down and dialog mode)
    
    
    
    
    
    • [x] Implementation
    
    
    
    • [x] Unit tests
    
    
    
  
  
  • [ ] Two separate inputs
    
    
    
    
    
    • [x] Implementation
    
    
    
    • [x] Unit tests
    
    
    
  
  
  • [ ] Date input and display formats
    
    
    
    
    
    • [x] Implementation
    
    
    
    • [ ] Unit tests
      
      
      
      
      
      
      
      • [ ] I want to be able to use date-editor in Template Form and Reactive Form
      
      
      
      
    
    
    
    • [x] Implementation
    
    
    
    • [ ] Unit tests
      
      
      
      
      
      
      
      • [ ] Validation of not valid range (@jackofdiamond5 )
      
      
      
      
    
    
    
    • [x] Implementation
    
    
    
    • [ ] Unit tests
      
      
      
      
      
      
      
      • [ ] Templating Directives
      
      
      
      
    
    
    
    • [x] Implementation
    
    
    
    • [ ] Unit tests
    
    
    
  
  
  • [ ] Keyboard navigation
    
    
    
    
    
    • [x] Implementation
    
    
    
    • [x] Unit tests
    
    
    
  
  
  • [ ] API
    
    
    
    
    
    • [x] Implementation
    
    
    
    • [x] Unit tests
      
      
      
      
      
      
      
      • [ ] Localization (@Lipata)
      
      
      
      
    
    
    
    • [x] Implementation
    
    
    
    • [ ] Unit tests
      
      
      
      
      
      
      
      • [ ] ARIA (@IvayloG)
      
      
      
      
    
    
    
    • [x] Implementation
    
    
    
    • [x] Unit tests
      
      
      
      
      
      
      
      • [x] Styling Component #7102
      
      
      
      
      • [x] Demos Dev
      
      
      
      
      • [x] Separate Demo for date range picker
      
      
      
      
      • [ ] Topic and Samples
      
      
      
      
      • [ ] Create new topic for date-range-pciker
      
      
      
      
      • [ ] [Simple demo](https://github.com/IgniteUI/igniteui-angular-samples/issues/1574)
      
      
      
      
      • [ ] [Advanced demo](https://github.com/IgniteUI/igniteui-angular-samples/issues/1847)
      
      
      
      
    
    
    
  
  

Related: calendar ARIA: https://github.com/IgniteUI/igniteui-angular/issues/6272

[radomirchev]

Referenced by #4282

[StefanIvanov]

Date picker should be compatible moreover identical to the range calendar the input value should read: "BeginOfRange - EndOfRange"

[jackofdiamond5]

Spec for new component

[jackofdiamond5]

Prerequisites

https://github.com/IgniteUI/igniteui-angular/issues/6271

Development

• [ ] Specification
• [ ] POC
• [ ] Initial implementaion
• [ ] Review and polish
• [ ] Test Scenarios
• [ ] ARIA Support
• [ ] LTR Support
• [ ] API and spec sync
• [ ] Styling and UI Implementation

Docs

• [ ] README
• [ ] DocFX and spec sync
• [ ] Samples
• [ ] Changelog update