DateTime Editor Specification

Date Editor Specification

Revision History

Version	User	Date	Notes
0.1	Nikolay Alipiev	January 14, 2020	Initial Draft + Keyboard section

1. Overview

GitHub	Milestone	Issue#	Name
igniteui-angular		#6271	Separate date and time editing functionalities from igxDatePicker and igxTimePicker into a new directive

Objectives

2. User Scenarios

The date editor directive supports the following user scenarios:

As an end user

Story 1:

As a developer

Story 1:

Acceptance criteria

All user stories must be satisfied.

Functionality

Date input or selection
Custom date display format
- List of date pattern is used:
- Y: year field without century and without leading zero Sample display value: 9 for 2009-06-21
- YY: year field without century and with leading zero Sample display value: 09 for 2009-06-21
- YYYY: year field with leading zeros Sample display value: 2009 for 2009-06-21
- M: month field as digit without leading zero Sample display value: 7 for 2009-07-21
- MM: month field as digit with leading zero Sample display value: 07 for 2009-07-21
- MMM: month field as short month name (up to 4 letters) Sample display value: Aug for 2017-08-21
- Short month name Full month name
  
  Jan January
  
  Feb February
  
  Mar March
  
  Apr April
  
  May May
  
  Jun June
  
  Jul July
  
  Aug August
  
  Sept September
  
  Oct October
  
  Nov November
  
  Dec December
- MMMM: month field as long month name Sample display value: August for 2017-08-21
- D: day of month field without leading zero Sample display value: 5 for 2017-08-05
- DD: day of month field with leading zero Sample display value: 05 for 2017-08-05
- DDD: day of the week as short name Sample display value: Thu for 2017-06-22
- Short weekday name Full weekday name
  
  Mon Monday
  
  Tue Tuesday
  
  Wed Wednesday
  
  Thu Thursday
  
  Fri Friday
  
  Sat Saturday
  
  Sun Sunday
- DDDD: day of the week as long name Sample display value: Friday for 2017-06-23
Date Validation (min/max check) – min and max day are settable. If manually inputted, the value is reverted to the set min/max.

3.1 Developer Experience

3.2 End user Experience

3.3 Keyboard Navigation

Navigation through different date editor sections should happen using the Arrow Left/Right keys, similar to the HTML input type date functionality. Note that in the igxMask directive similar navigation can happen using the CTRL + Arrow Left/Right keys (demo).