Закрыт

Доработать скрипт на Javascript

Имеется готовый скрипт, написанный на javascript. Скрипт обычного календаря. Необходимо его доработать.

Пункты доработок:

1. Добавить поле ввода (input type="text"), кнопку (обычный div с иконкой) и надпись (label). При отдельном нажатии на каждый из них должен появляться скрытый блок (div с календарем) с анимацией через стили css на @keyframes (можно обычный scale или transform с использование transition в 0.5s). Выше указанные элементы должны быть responsive.

2. Появление скрытого блока с календарем (div с календарем) не должно смещать ниже размещенные элементы верстки (другие div), а раскрываться поверх все данных блоков.

3. При выборе даты в календаре любого месяца и любого года в элементы, указанные в пункте 1 (input, div и label) должна отобразиться выбранная дата. Соответственно после клика на дате окно с календарем (div с календарем) должно скрыться через стили css на @keyframes (можно обычный scale или transform с использование transition в 0.5s). Также скрываться окно должно при клике за пределами данного окна и вышеуказанных элементов.

4. Данная конструкция скрипта должна работать асинхронно, то есть при добавлении нескольких подобных календарей каждый из них должен работать автономно. При этом стиль css должен быть единым для каждого календаря. То есть если в скрипте будут динамически создаваемые стили определенных элементов, то чтобы не было необходимости для каждого из них прописывать свой стиль дополнительно в файле стилей css.

5. Добавить возможность выбора диапазона дат. Полученный диапазон должен проставляться в указанный выше элементы с разделителем (в качестве разделителя обычный дефис или тире). Выбор должен осуществляться путем клика на первую дату, а потом на следующую дату. При этом можно перелистывать календарь до нужного места. Закрытие окна должно происходить после клика на вторую дату. Соответственно в коде html надо прописать дополнительный класс или идентификатор, по которому скрипт будет определять простой календарь или с выбором диапазона.

6. Вынести из скрипта в отдельный файл массивы месяцев, их абриавиатур и дней недели. В качестве формата файлов для данной цели применять json или ini. Данные из таких файлов должны подгружаться в скрипт в соответствующий массив.

7. При перелистывании годов:

- на последнем месяце (декабрь) добавить автоматическое переключение на другой месяц (январь) следующего года

- на первом месяце (январь) добавить автоматическое переключение на другой меся (декабрь) предыдущего года

8. Разделить логику скрипта таким образом, чтобы выводились месяцы и года:

- в виде всплывающего окна с месяцами при клике на название месяца и скроллинга годов (в настоящее врем реализовано).

- в виде скроллинга месяцев и года (аналогично годам. нажатие стрелки вправо пролистывает на следующий месяц года и соответственно в обратную сторону)

- в виде отдельных окон рядом с основным (отдельное окно с месяцами и отдельное окно с годами, перелистывание в виде вертикального скролла)

P.S.: Стилистика календаря остается на без изменения, над стилями не надо работать. Код должен быть только на Javascript, CSS, HTML. Стили строго в файле css, а не частично в Javascript или html.

P.S.: Работу можно разделить на части.

Детали при личной переписке с кандидатами (ссылки источников, исходник скрипта, демонстрация экрана).

Навыки: CSS, HTML5, JavaScript

Показать больше: websites type text displayed, net documentviewer type text find, type text external file flash, dolphin boonex type text, option type text oscommerce, type text file, phone notify type text free, excel macros type text website, script type text file, flash type text, type text save flash, photoshop amend type text, combobox type text 2005, english bahasa malaysia type text translation voice, transcritption software linux type text, type text cards, type text jpg, type text jpg document word, type text movies, different type text generator

О работодателе:
( 0 отзыв(-а, -ов) ) Russian Federation

ID проекта: #30888818