--- title: "JQuery Date & Time Range Picker | Mobiscroll" component: "Range" framework: "jQuery" library_version: "6.1.5" url: "https://demo.mobiscroll.com/jquery/range" --- # Highly customizable jQuery range picker for date & time JQuery range picker for date, time, and date & time ranges — calendar, week, and scroller views with validation, presets, and range-length control. Last update: Oct 16, 2026 Modern **jQuery** range picker for flight, accommodation and resource booking ## Description The range picker supports **start & end selection** for **date, time** and combined **date & time**. Choose between a **calendar view** with one or more months, **week view** with single or multiple weeks or **date and time scrollers and dropdowns**. Easily **switch between single and range select** for use cases like one-way flights. Capabilities like **built-in validation, minimum and maximum values, disabled dates and range length** are supported by both the scroller and the calendar. ## Using the picker - [Mobile and Desktop](https://demo.mobiscroll.com/jquery/range/mobile-desktop-usage.md) - Configure the JQuery date range picker for touch screens or desktop — link it to a form field, custom input, or embed it inline. - [Initializing the Picker](https://demo.mobiscroll.com/jquery/range/usage-on-input-or-inline.md) - Use the JQuery date range picker on a single input, two separate start/end inputs, or inline on the page — no input required. - [Responsive Layout](https://demo.mobiscroll.com/jquery/range/responsive.md) - Configure the JQuery date range picker responsively — show one month on mobile and two months on larger screens using built-in breakpoints. - [Understanding Controls](https://demo.mobiscroll.com/jquery/range/calendar-scroller-dropdown.md) - Build a JQuery date range picker with switchable calendar view, date scroller, and datetime dropdown — adapts to mobile scroller or desktop dropdown. - [Display Modes](https://demo.mobiscroll.com/jquery/range/mobile-desktop-display.md) - Configure how the JQuery range picker appears — inline embed, anchored to an input, or modal — for mobile and desktop layouts. ## Common use cases - [Date Filter with Preset Ranges](https://demo.mobiscroll.com/jquery/range/date-filtering-with-predefined-ranges.md) - Build a date filtering UI with the JQuery date range picker — choose from custom or preset ranges (Today, Last 7 days, Last 30 days). - [Flight Booking](https://demo.mobiscroll.com/jquery/range/flight-booking.md) - Build a flight booking date picker with the JQuery range component — round-trip and one-way selection. - [Rental Availability](https://demo.mobiscroll.com/jquery/range/book-rental-months-ahead.md) - Build a rental availability calendar with the JQuery date range picker — multi-month view with seasonal pricing display and booking validation. - [Event Date Selection](https://demo.mobiscroll.com/jquery/range/adding-event-start-end.md) - Pick start and end dates for events with the JQuery date range picker — switch between date-only and date and time entry with an all-day toggle. ## Configuring the view - [Date Range Picker](https://demo.mobiscroll.com/jquery/range/date-range.md) - Set up a JQuery date range picker as a calendar view or date scroller — inline or in a popup, with one or two inputs. - [Time Range Picker](https://demo.mobiscroll.com/jquery/range/time-range.md) - Select start and end times with the JQuery time range picker — choose inline scroller, time grid, or single/split input layouts. - [Date & Time Range Picker](https://demo.mobiscroll.com/jquery/range/date-time-range.md) - Pick start and end date-times with the JQuery range picker — choose from calendar, time grid, or date-time scroller, with single or split input layouts. - [Range Picker Customization](https://demo.mobiscroll.com/jquery/range/week-month-view-scrolling-direction.md) - Show multiple months or weeks in the JQuery date range picker calendar — set scroll direction, display count, week numbers, and outer day visibility. - [Label Customization](https://demo.mobiscroll.com/jquery/range/customizing-labels-selection.md) - Override the start/end date labels on the JQuery date range picker — use “Check in/Check out” for hotels or “Outbound/Return” for flights, or hide them. - [Day Marks, Colors & Labels](https://demo.mobiscroll.com/jquery/range/dots-colors-labels.md) - Highlight days with or background colors in the JQuery date range picker — configure by exact date, date range, and or recurring rule. ## Configuring value selection - [Presets](https://demo.mobiscroll.com/jquery/range/presets.md) - Offer one-click preset ranges — Today, Yesterday, This week, Last month — on the JQuery date range selector for fast filtering. - [Date Formats](https://demo.mobiscroll.com/jquery/range/date-object-ISO-8601-moment.md) - Use the JQuery date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return formats. - [Custom Date & Time Format](https://demo.mobiscroll.com/jquery/range/formatting-return-values.md) - Set custom date and time display formats on the JQuery date range picker — override locale defaults per input field. - [Timezone Settings](https://demo.mobiscroll.com/jquery/range/setting-the-picker-timezone.md) - Set independent data and display timezones on the JQuery date range picker — configure timezone conversion with Luxon, Moment-Timezone, or Day.js. ## Validation & restricting selection - [Min Max Length](https://demo.mobiscroll.com/jquery/range/min-max-length.md) - Enforce minimum and maximum length limits on date range selection with the JQuery date range picker — ideal for booking dates. - [Date Restrictions](https://demo.mobiscroll.com/jquery/range/min-max-restrictions.md) - Set min and max date limits in the JQuery date range picker to restrict selectable dates and times — supports date-only and date-time modes. - [Date Validation](https://demo.mobiscroll.com/jquery/range/disabled-invalid-values.md) - Disable exact dates, date ranges, or recurring dates in the JQuery date range picker — control which dates are available for selection. - [Recurring Rules](https://demo.mobiscroll.com/jquery/range/recurring-values.md) - Configure recurring rules in the JQuery range picker — set daily, weekly, monthly, or yearly patterns, define stop conditions, and exclude specific dates. ## Customizing the look & feel - [Theme Customization](https://demo.mobiscroll.com/jquery/range/themes-ios-material-windows.md) - Style the JQuery date range picker with iOS, Material, or Windows themes — switch light/dark mode or apply brand colors via the theme builder. - [Custom Shaped Day Marks](https://demo.mobiscroll.com/jquery/range/customize-marked-day-shapes.md) - Customize day mark shapes on the JQuery date range picker — show triangles, squares, and dots using CSS overrides or a custom mark CSS class. - [Custom Day Styling](https://demo.mobiscroll.com/jquery/range/half-day-styling.md) - Style day cells in the JQuery date range picker with custom CSS classes — including check-in and check-out date highlights. ## Localization & tapping into the lifecycle - [Event Hooks](https://demo.mobiscroll.com/jquery/range/event-hooks.md) - Attach custom logic to the JQuery date range picker using lifecycle event hooks that fire on user interaction. - [Gregorian Jalali Hijri](https://demo.mobiscroll.com/jquery/range/gregorian-jalali-hijri.md) - Select a date range with Gregorian, Jalali (Persian), or Hijri (Arabic) calendar systems in the JQuery date range picker. - [Localization](https://demo.mobiscroll.com/jquery/range/localization.md) - Localize the JQuery date range picker — set date and time formats, button labels, RTL support for 37 languages, with overridable settings. - [RTL Support](https://demo.mobiscroll.com/jquery/range/rtl-right-to-left.md) - Use the JQuery date range picker with built-in RTL support — set right-to-left layout manually or inherit it from locale settings.