DateTime Editor Specification

Date Editor Specification

Revision History

Version	User	Date	Notes
0.1	Nikolay Alipiev	January 14, 2020	Initial Draft + Keyboard section
0.2	Nikolay Alipiev	January 16, 2020	Min and Max values
0.3	Nikolay Alipiev	January 17, 2020	Validation required
0.4	Nikolay Alipiev	January 17, 2020	Validation - preventing invalid input
0.5	Stefan Ivanov	January 21, 2020	User and Developer Stories
0.6		January **, 2020

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: I want to be able to visually identify what day is selected.
Story 2: I want to be able to increment/decrement the date/time section where my cursor currently is with the keyboard arrows up/down.
Story 3: I want to edit the date in the input when the date editor is editable.
Story 4: I want to clear the entered value in the input using clear button.
Story 5:
Story 6:
Story 7:

As a developer

Story 1: I want to be able to implement a date editor in my application.
Story 2: I want to be able to configure the editor as editable(default value), readonly and disabled.
Story 3: I want to implement a shortcut for the current day.
Story 4:
Story 5:
Story 6:
Story 7:
Story 8:

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 - prevent invalid input issue
Date Validation (min/max check) – min and max day are settable. If manually inputted, the value is reverted to the set min/max. There is already an issue about that.
Date Validation (required) - issue
Incrementing/decrementing the date/time section where the cursor currently is via the keyboard:

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.

Key combination	Effect
Left Arrow	Move one character to the left
Right Arrow	Move one character to the left
Home	Move to the beginning
End	Move to the end
CTRL/COMMAND + Left Arrow	Move to the beginning of the date/time section - current one or left one
CTRL/COMMAND + Right Arrow	Move to the end of the date/time section - current on or right one
Down Arrow	On a date/time section should decrement that part of the edited date
Up Arrow	On a date/time section should increment that part of the edited date
CTRL+;	Sets the current date and time as value of the editor