Диалог элемента управления своими руками

[Roman Koff]

Имеется текстовое поле ввода. Нужно чтобы при клике на нем показывалось поле с формой, где устанавливаются некие значения и после клика на сохранить, эти значения передавались текстовому полю.

Т.е. банально datepicker. Как построить функционал с использованием JQuery?

[MallSerg]

<input type="date">

[Erolast]

<input type="date">

Только в опере и хроме реализовано.

Имеется текстовое поле ввода. Нужно чтобы при клике на нем показывалось поле с формой, где устанавливаются некие значения и после клика на сохранить, эти значения передавались текстовому полю.

Т.е. банально datepicker. Как построить функционал с использованием JQuery?

https://www.google.com/search?q=jquery+datepicker

[Roman Koff]

Нет. Про готовые датапикеры я знаю и юзаю:
- https://github.com/smalot/bootstrap-datetimepicker -- основная рабочая лошадка
- https://github.com/nazar-pc/PickMeUp -- тоже очень неплохой вариант
- https://github.com/xdan/datetimepicker -- до кучи
- js date picker своими руками. Оцените кривизну кода

Вопрос не в выборе датапикера, а в том, что хочу сделать сам. Простой, без дополнительного функционала и плюшек, с простым дизайном. На этом примере интересно отработать механизм, чтобы потом писать другие пикеры (например выбор цвета, параметры объектов и т. д.). Нужно именно применительно к JQuery, т. к. на него основная ставка в проекте (он уже есть).

[Roman Koff]

Вопрос то прост. Есть контрол на форме, при клике рисуем формочку, забираем текущее значение контрола на форму, на форме простенькая логика, при сохранении/закрытии формы передаем значение контролу.

[danik.js]

хочу сделать сам

Ну ты гемор себе ищешь. Или хочешь поучиться?

Только в опере и хроме реализовано.

Эта штука (webshims) решает данную проблему: http://jsfiddle.net/trixta/VNuct/
Кроме того, имеет простой дизайн - раскрасить под свой проект не составит труда. Правда там все размеры в em

[Roman Koff]

Датапикер вообще не цель! Мне не нужен датапикер, мне нужен пример простого функционала: клик на контрол -> дорисовали форму -> клик на форме -> скрыли форму + установили значение контрола.

[danik.js]

Самый простой вариант - вычисляешь позицию инпута, позиционируешь по этой позиции свой попап. Попап делаешь position:fixed. Правда скролл будет проблемой.
И еще: я считаю что фокус не нужно убирать с инпута. То есть в попапе будет виртуальный фокус. Если не делаешь сайт для слепых, то это не будет проблемой. Иначе атрибут aria-activedescedant или что-то такое в помощь. Это упростит появление/скрытие попапа. По фокусу - показываем, по блюру - скрываем. Хотя могут возникнуть проблемы.