AngularJS date picker control

I need a custom datetime picker control, see attached document

Must have features

1. Support both ltr and rtl

2. Support multi-language and multi-culture

3. Developed and used by angularjs

4. Support all browsers including IE

Control should be developed as a directive with its own files (both css and js files)

Control should have these properties:

1. LocaleID – A number representing a locale we created. The control should have a config file for all needed properties based on locale id.

That config file should have all the needed properties like (and any other needed property)

a. Date format

b. Texts for translates (like month name, words like from and to, predefined ranges names). These texts should have some translation key property.

c. Direction (ltr or rtl)

d. Predefined ranges

2. Predefined ranges to show – A list of predefined ranges to show by English name

3. ControlID – A string represting the control's id, used mainly for save/load

4. Default from – A default from value, in dd/mm/yyyy format

5. Default to – A default to value, in dd/mm/yyyy format

6. Default predefined – The English name of the predefined range

Development phases

1. Control without design

2. Control with design

3. QA

Special notes

1. Control css styles should not conflict with site's style. Don't put a .input {width:…} in the css

2. You can use (it's even better) third parties for the datetime picker, but all configurations will be done in the main config file for this control and this control should support all localization issued needed

3. Design for closed and open state will be provided for development phase 2

4. Control should work with latest jquery, angularjs and other libraries needed

5. We have more controls to develop, keep that in mind

See how control looks like in the attached file

Behavior:

1. User can set the from date by entering free text or choosing date from the date picker

2. User can set the to date by entering free text or choosing date from the date picker

3. From and to dates are displayed using masks validation which doesn't allow entering wrong info like non digit into

4. When filling the from/to date manually, the date pickers will go to the date entered manually

5. When choosing a from date which is later than the to date, the to date will be set automatically to the from date value (both text box and date control)

6. Clicking on the ok will validate the dates, if having any problem the control will be marked with error with message. If no error detected, control will be confirmed (see more info ahead)

7. When selecting a predefined period (last month, last week), control confirms

8. When the control confirms it will:

a. Update the model

b. Fire an update event with the relevant info (from date, to date and predefined period name)

c. Save date selection info in localstorage using the controlid property

9. Clicking outside of the edit or the cancel button will close the control without doing any change

10. When control loads

a. If date selection was saved in the past, it will display the load and set accordingly

b. If no date selection was saved and default values property defined, it will load from default properties.

c. If predefined properties don't exist (or any other error with load saved values), it will set from to 7 days ago and to today

11. Controls setting – Allowing to set the control date selection by method using the same info as the default values

12. Control getting – Allowing getting the control date selection

AngularJS HTML JavaScript

Project ID: #6625502

About the project