Writing a js/jquery datepicker script
1913 USD I will commission the writing of a js/jquery datepicker script (a dropdown layer with a calendar for date selection) for the travel industry.
The datepicker should look similar to the one on booking.com, parkos.com on mobile, i.e.:
- it should slide up from the bottom
- it should offer the selection of a range from two input fields
- it should only contain dates without unnecessary additional features (i.e. without location and other inputs)
I have not found such an open-source solution available for download and modification; I have checked various ones like Flatpickr, Air Datepicker, Daterangepicker, unfortunately, they do not offer the same UX as booking.com or parkos.com
The datepicker concerns the website: parkingi.pl
I really care about the correct current logic of date selection. Input 1 and input 2 must account for the changes made in them and show the range of selected days
Scope of the order:
Creation of a datepicker for the website www.parkingi.pl
The appearance of the datepicker for mobile and desktop should be different (I described it below)
Guidelines
Datepicker for mobile
Support for two input fields:
arrival date at the parking lot,
departure date from the parking lot
Datepicker sliding up from the bottom as it is on booking.com or parkos.com
The calendar in the datepicker should be arranged by months one below the other as on the websites mentioned above
Ability to close the layer with the X button
Datepicker for desktop
Appearance similar to the current one with the difference that the logic of operation is as described in point 3
Separate fields for selecting dates for each field (Input 1 and Input 2)
Logic of operation input 1 (start date), and input 2 (end date)
Ability to select a date range by marking the start and end dates
Event on clicking input:
Input 1: when selecting the start date, the “done” button (as on mobile booking.com) must be inactive until the end date is selected.
If someone has already selected an end date, and the start date is greater, the end date must reset. Input 1 should handle the selection of the range (start and end date)Input 2: input only handles the end date (if the start date has already been selected).
If the start date in input 1 has not been selected, we select the range (start and end date).
If the end date is less than the start date (from input 1), then we select the range (start and end date)
Acceptance criteria
Execution of the order according to the guidelines
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 days1913 USD
11606 44 0 10 days1913 USDHello! I have experience in developing custom solutions for websites and can create a datepicker with the necessary UX, like on booking.com or parkos.com, taking your requirements into account. I will ensure correct logic for date range selection for both mobile and desktop versions. I am ready to discuss project details and suggest the optimal approach!
-
Winning proposal10 days1913 USD
3698 111 3 5 Winning proposal10 days1913 USDGood morning, Daniel,
I am developing a necessary script for date selection in the form of a calendar using jQuery.
Sincerely, Yuri
-
7 days1913 USD
95644 1272 1 10 7 days1913 USDHello. I have extensive experience in website development. Ready to collaborate.
-
1 day1831 USD
310 1 day1831 USDGood day! I will create a custom DatePicker.
I am ready to discuss the details.
Write to me, I will do it quickly and efficiently)
Hourly rate $4/hour.
My work on 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 days1913 USD
343 3 days1913 USDGood day
I have been coding for over 8 years
I will create a custom layout, nicely customize plugins
The work will be done using BEM, vanilla JS, pixel-perfect
-
5 days1913 USD
2221 22 0 5 days1913 USDI will create a high-quality Datepicker for you, tailored to your needs. I have extensive experience in implementing similar scripts in JavaScript. Based on the detailed scope of tasks (TŻ) described by you, I will execute the project according to the requirements and templates indicated on the provided pages. I guarantee timeliness and a professional approach.
-
14 days1913 USD
3623 55 2 14 days1913 USDTo create a Datepicker similar to the one on Booking.com, you can use the **Air Datepicker** library and customize it:
1. Set it to open as a sliding panel from the bottom.
2. Implement date range selection (start/end).
3. Minimize the interface, leaving only the calendar.
If you need, I can provide the ready code or help with the configuration.
Siedlce