1. Three separated inputs
1.1. CSS
1.1.1. Display component as 1 input
1.1.2. Change the color of component while focusing
1.2. Handle Keypress
1.2.1. enter alphabet/specific chars
1.2.1.1. ignore to update on current variables state
1.2.2. enter number
1.2.2.1. when on date part
1.2.2.1.1. if valid
1.2.2.1.2. if not valid
1.2.2.2. when on month part
1.2.2.2.1. if valid
1.2.2.2.2. if not valid
1.2.2.3. when on year part
1.2.2.3.1. accept 4 number only
1.2.2.3.2. if valid
1.2.2.3.3. if not valid
1.2.3. delete char
1.2.3.1. when still has value, do nothing
1.2.3.2. when has no value
1.2.3.2.1. has previous child, focus on that
1.2.3.2.2. has no previous child, keep staying
1.3. Handle touch behaviours
1.3.1. When user touch to component
1.3.1.1. To day/month/year children comp
1.3.1.1.1. Select all selected child content
1.3.1.2. To outside of childrens
1.3.1.2.1. Select first child component
1.3.2. when user blur
1.3.2.1. the component
1.3.2.1.1. trigger validating
1.3.2.2. the child to focus on another child, do nothing
1.4. Validation
1.4.1. Check year range
1.4.1.1. if not valid
1.4.1.1.1. change border color to red
1.4.1.1.2. show warning/error
1.4.2. check date is valid
1.4.2.1. if not valid
1.4.2.1.1. change border color to red
1.4.2.1.2. show warning/error
1.4.2.2. if valid
1.4.2.2.1. update flag variable
1.5. Input
1.5.1. date
1.5.1.1. In number type
1.5.2. language
1.5.2.1. can be achieved by internal msg bus
1.5.2.2. to get the suitable separator
1.5.2.3. to get the correct placeholder
1.5.3. options
1.5.3.1. to disable d/m/y, to choose which child can be visible
1.5.3.2. min/max year
1.6. Output
1.6.1. date
1.6.1.1. in number type
1.6.2. onValid
1.6.2.1. emit event when the date is valid or be triggered