Написание скрипта js/jquery datepicker
Я поручаю написать скрипт js/jquery для выбора даты (всплывающий слой с календарем для выбора дат) для туристической отрасли.
Выбор даты должен выглядеть похоже на тот, что есть на booking.com, parkos.com на мобильных устройствах, а именно:
- должен выдвигаться снизу
- должен предлагать выбор диапазона из двух полей ввода
- должен содержать только даты без лишних дополнительных элементов (т.е. без места и других полей ввода)
Я не нашел такого решения с открытым исходным кодом, доступного для загрузки и модификации, я проверял разные, например: Flatpickr, Air Datepicker, Daterangepicker, к сожалению, они не предлагают такой пользовательский опыт, как на booking.com или parkos.com
Выбор даты касается сайта: parkingi.pl
Мне очень важно правильно реализовать текущую логику выбора даты. Поле ввода 1 и поле ввода 2 должны учитывать внесенные изменения и показывать диапазон выбранных дней
Объем задания:
Создание выбора даты для сайта www.parkingi.pl
Внешний вид выбора даты для мобильных устройств и настольных ПК должен отличаться (я описал это ниже)
Рекомендации
Выбор даты для мобильных устройств
Поддержка двух полей ввода:
дата прибытия на парковку,
дата выезда с парковки
Выбор даты выдвигается снизу, как это происходит на booking.com или parkos.com
Календарь в выборе даты должен быть расположен месяцами один под другим, как на указанных выше сайтах
Возможность закрытия слоя кнопкой X
Выбор даты для настольных ПК
Внешний вид похож на текущий, с той разницей, что логика работы такая, как описано в пункте 3
Отдельные поля для выбора даты при каждом поле (Поле ввода 1 и Поле ввода 2)
Логика работы поля ввода 1 (начальная дата), и поля ввода 2 (конечная дата)
Возможность выбора диапазона дат с указанием начальной и конечной даты
Событие по клику на поле ввода:
Поле ввода 1: при выборе начальной даты кнопка “готово” (как на мобильном booking.com) должна быть неактивна до выбора конечной даты.
Если кто-то уже выбрал конечную дату, а начальная дата больше, конечная дата должна сбрасываться. Поле ввода 1 должно поддерживать выбор диапазона (начальная и конечная даты)Поле ввода 2: поле ввода поддерживает только конечную дату (если начальная уже выбрана).
Если начальная дата в поле ввода 1 не выбрана, выбираем диапазон (начальную и конечную даты).
Если конечная дата меньше начальной даты (из поля ввода 1), тогда выбираем диапазон (начальную и конечную даты)
Условия приемки
Выполнение задания согласно рекомендациям
Datepicker dotyczy strony: parkingi.pl
Bardzo zależy mi na poprawnie obecnej logiki wybierania daty. Input 1 oraz input 2 muszą uwzględniać zmiany w nich wprowadzane oraz pokazywać zakres wybranych dni
Zakres zlecenia:
Utworzenie datepicker dla strony www.parkingi.pl
Wygląd datepicker dla mobile i desktop powinien być inny (opisałem to poniżej)
Wytyczne
Datepicker dla mobile
Obsługa dwóch pól input:
data przyjazdu na parking,
data wyjazdu z parkingu
Datepicker wysuwany z dołu tak jak to ma miejsce na booking.com lub parkos.com
Kalendarz w datepicker powinien być ułożony miesiącami jeden pod drugim tak jak na stronach podanych powyżej
Możliwość zamknięcia layer przyciskiem X
Datepicker dla desktop
Wygląd podobny do obecnego z tą różnicą, że logika działania taka jak opisana w punkcie 3
Osobne pola do wybierania daty przy każdym polu (Input 1 i Input 2)
Logika działania input 1 (data początkowa), oraz input 2 (data końcowa)
Możliwość wybrania zakresu dat z zaznaczeniem daty początkowej i końcowej
Zdarzenie po kliknięcie input:
Input 1: przy wyborze daty początkowej przycisk “gotowe” (tak jak na mobile booking.com) musi być nieaktywny do czasu wyboru daty końcowej.
Jeżeli ktoś już wybrał datę końcową, a data początkowa jest większa, data końcowa musi się zerować. Input 1 powinien obsługiwać wybranie zakresu (data początkowa i końcowa)Input 2: input obsługuje tylko datę końcową (jeżeli początkowa została już wybrana).
Jeżeli data początkowa w input 1 nie została wybrana wybieramy zakres (datę początkową i końcową).
Jeśli data końcowa jest mniejsza od daty początkowej (z input 1), wtedy wybieramy zakres (datę początkową i końcową)
Warunki akceptacji
Wykonanie zlecenia według wytycznych
-
10 дней85 322 UAH
11616 44 0 10 дней85 322 UAHПривет! У меня есть опыт разработки кастомных решений для вебсайтов, и я могу создать datepicker с необходимым UX, как на booking.com или parkos.com, с учетом ваших требований. Обеспечу корректную логику выбора диапазона дат для мобильных и десктопных версий. Готов обсудить детали проекта и предложить оптимальный подход!
-
Победившая ставка10 дней85 322 UAH
3720 111 3 5 Победившая ставка10 дней85 322 UAHДобрый день, Даниэль,
Я разрабатываю необходимый скрипт для выбора дат в форме календаря на jQuery.
С уважением, Юрий
-
7 дней85 322 UAH
94294 1269 1 10 7 дней85 322 UAHЗдравствуйте. Есть большой опыт в разработке сайтов. Готов к сотрудничеству
-
1 день81 665 UAH
310 1 день81 665 UAHДобрый день! Сделаю кастомный DatePicker.
Готова обсудить детали.
Пишите, сделаю быстро и качественно)
Почасовая ставка $4/час.
Моя работа на React+Node.js:
https://freelancehunt.com/showcase/work/sayt-full-stack-reactjs-node-mongodb-express/1889361.html
- HTML/CSS/JS:
salon-rust-alpha.vercel.app
-
3 дня85 322 UAH
343 3 дня85 322 UAHДобрый день
Более 8 лет верстаю
Сделаю верстку самописца, хорошо кастомизирую плагины
Работа будет выполнена по BEM, vanilla JS, pixel-perfect
-
5 дней85 309 UAH
2245 22 0 5 дней85 309 UAHЯ разработаю для вас Datepicker высшего качества, адаптированный под ваши нужды. У меня есть большой опыт в реализации подобных скриптов на языке JavaScript. На основе подробно описанного вами объема задач (ТЗ) я выполню проект в соответствии с требованиями и образцами, указанными на предоставленных страницах. Обеспечиваю своевременность и профессиональный подход.
-
14 дней85 322 UAH
3623 55 2 14 дней85 322 UAHЧтобы создать Datepicker, похожий на тот, что на Booking.com, можно использовать библиотеку **Air Datepicker** и настроить её:
1. Установить открытие в виде выдвижной панели снизу.
2. Реализовать выбор диапазона дат (начало/конец).
3. Минимизировать интерфейс, оставив только календарь.
Если нужно, я могу предоставить готовый код или помочь в настройке.