Date Input

Get Started. It's Free
or sign up with your email address
Date Input by Mind Map: Date Input

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 ignore to update on current variables state

1.2.2. enter number when on date part if valid if not valid when on month part if valid if not valid when on year part accept 4 number only if valid if not valid

1.2.3. delete char when still has value, do nothing when has no value has previous child, focus on that has no previous child, keep staying

1.3. Handle touch behaviours

1.3.1. When user touch to component To day/month/year children comp Select all selected child content To outside of childrens Select first child component

1.3.2. when user blur the component trigger validating the child to focus on another child, do nothing

1.4. Validation

1.4.1. Check year range if not valid change border color to red show warning/error

1.4.2. check date is valid if not valid change border color to red show warning/error if valid update flag variable

1.5. Input

1.5.1. date In number type

1.5.2. language can be achieved by internal msg bus to get the suitable separator to get the correct placeholder

1.5.3. options to disable d/m/y, to choose which child can be visible min/max year

1.6. Output

1.6.1. date in number type

1.6.2. onValid emit event when the date is valid or be triggered

2. One input with auto-format support

2.1. Handle on 1 input í too difficult

3. Use 3rd-party source code

3.1. Unable to find out