Сверстать и реализовать выбор даты в поле ввода

Дизайн готов. Необходимо сверстать и реализовать функционал поля выбора даты. 

Требования к полю ввода. 

Ввод даты должен быть двумя способами.  
1. Через выбор даты из календаря при нажатии на кнопку. Календарь выпадает вниз-вправо. Если в таком случае календарь не помещается на окне, то отображаем чтобы он помещался (порядок вниз-влево, вверх-вправо, вверх-влево). 
2. Через ввод непосредственно в поле ввода. Распишу все подробно. Введенная информация должна форматировать и валидироваться на лету. Т.е. должен сохраняться формат "ДД.ММ.ГГГГ". Точки всегда стоят на своих местах, после ввода первой группы курсор автоматом перепрыгивает на следующую. Стирать точки нельзя. Вводить ничего кроме чисел нельзя. При вводе некорректной даты не давать снимать фокус с поля. 

Также важно, чтобы можно было просто описывать поле такого типа в html коде. Т.е. мы пишем что-то в духе <input type="text" name="..." value="..." data-type="date">, при отображении страницы поле автоматом преобразуется к нужному виду. 

Все технические детали обсуждаемы. Бюджет предварительный и тоже обсуждаемый.