--- title: "JavaScript Date Range Picker Component | Mobiscroll" component: "Range" framework: "JavaScript" library_version: "6.1.5" url: "https://demo.mobiscroll.com/javascript/range" --- # Advanced Javascript range picker for date & time Date range picker component for booking and reservation interfaces — choose calendar, week, or time range views and add built-in validation. Plain JS api for usage everywhere. Last update: Oct 16, 2026 Modern range picker for flight, accommodation and resource booking for **plain JS** ## 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/javascript/range/mobile-desktop-usage.md) - See how the Javascript date range picker renders on touch screens versus desktop — link it to a form field or custom input, or embed it inline. - [Initializing the Picker](https://demo.mobiscroll.com/javascript/range/usage-on-input-or-inline.md) - Use the Javascript 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/javascript/range/responsive.md) - Configure the Javascript date range picker to adapt to screen size — show one month on mobile and two on larger screens using built-in breakpoints. - [Understanding Controls](https://demo.mobiscroll.com/javascript/range/calendar-scroller-dropdown.md) - Build a Javascript 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/javascript/range/mobile-desktop-display.md) - Configure how the Javascript 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/javascript/range/date-filtering-with-predefined-ranges.md) - Build a date filtering UI with the Javascript date range picker — choose from custom or preset ranges (Today, Last 7 days, Last 30 days). - [Flight Booking](https://demo.mobiscroll.com/javascript/range/flight-booking.md) - Build a flight booking date picker with the Javascript range component — round-trip and one-way selection. - [Rental Availability](https://demo.mobiscroll.com/javascript/range/book-rental-months-ahead.md) - Build a vacation rental availability calendar with the Javascript date range picker — multi-month view with automatic booking validation. - [Range Picker for Event Creation](https://demo.mobiscroll.com/javascript/range/adding-event-start-end.md) - Add a date range picker to event creation forms — switch between date-only and date+time modes with an all-day toggle for start and end date selection. ## Configuring the view - [Date Range Picker](https://demo.mobiscroll.com/javascript/range/date-range.md) - Set up a Javascript 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/javascript/range/time-range.md) - Select start and end times with the Javascript time range picker — choose inline scroller, time grid, or single/split input layouts. - [Date & Time Range Picker](https://demo.mobiscroll.com/javascript/range/date-time-range.md) - Pick start and end date-times with the Javascript range picker — choose from calendar, time grid, or date-time scroller, with single or split input layouts. - [Range Picker Customization](https://demo.mobiscroll.com/javascript/range/week-month-view-scrolling-direction.md) - Show multiple months or weeks in the Javascript date range picker calendar — set scroll direction, display count, week numbers, and outer day visibility. - [Label Customization](https://demo.mobiscroll.com/javascript/range/customizing-labels-selection.md) - Override the start/end date labels on the Javascript 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/javascript/range/dots-colors-labels.md) - Highlight days with or background colors in the Javascript date range picker — configure by exact date, date range, and or recurring rule. ## Configuring value selection - [Presets](https://demo.mobiscroll.com/javascript/range/presets.md) - Add predefined date range presets — Today, Yesterday, This week, Last month — to a Javascript date range picker for one-click filtering. - [Date Formats](https://demo.mobiscroll.com/javascript/range/date-object-ISO-8601-moment.md) - Use the Javascript date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return format. - [Custom Date & Time Format](https://demo.mobiscroll.com/javascript/range/formatting-return-values.md) - Set custom date and time display formats on the Javascript date range picker — override locale defaults per input field. - [Timezone Settings](https://demo.mobiscroll.com/javascript/range/setting-the-picker-timezone.md) - Set independent data and display timezones on the Javascript date range picker — configure timezone conversion with Luxon, Moment-Timezone, or Day.js. ## Validation & restricting selection - [Min Max Length](https://demo.mobiscroll.com/javascript/range/min-max-length.md) - Enforce minimum and maximum length limits on date range selection with the Javascript date range picker — ideal for booking dates. - [Date Restrictions](https://demo.mobiscroll.com/javascript/range/min-max-restrictions.md) - Set min and max date boundaries in the Javascript date range picker to restrict selectable dates and times — supports date-only and date-time modes. - [Date Validation](https://demo.mobiscroll.com/javascript/range/disabled-invalid-values.md) - Disable specific dates, date ranges, or recurring dates in the Javascript date range picker to guide users toward valid selections. - [Recurring Rules](https://demo.mobiscroll.com/javascript/range/recurring-values.md) - Configure recurring rules in the Javascript 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/javascript/range/themes-ios-material-windows.md) - Style the Javascript 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/javascript/range/customize-marked-day-shapes.md) - Customize day mark shapes on the Javascript date range picker — show triangles, squares, and dots using CSS overrides or a custom mark CSS class. - [Custom Day Styling](https://demo.mobiscroll.com/javascript/range/half-day-styling.md) - Style individual day cells in the Javascript date range picker with custom CSS classes and background colors. ## Localization & tapping into the lifecycle - [Event Hooks](https://demo.mobiscroll.com/javascript/range/event-hooks.md) - Attach custom logic to the Javascript date range picker using lifecycle event hooks — onChange, onSet, and onInit fire on user interaction. - [Gregorian Jalali Hijri](https://demo.mobiscroll.com/javascript/range/gregorian-jalali-hijri.md) - Select a date range with Gregorian, Jalali (Persian), or Hijri (Arabic) calendar systems in the Javascript date range picker. - [Localization](https://demo.mobiscroll.com/javascript/range/localization.md) - Localize the Javascript date range picker — set date and time formats, button labels, RTL support, and 37 languages, with overridable settings. - [RTL Support](https://demo.mobiscroll.com/javascript/range/rtl-right-to-left.md) - Use the Javascript date range picker with built-in RTL support — set right-to-left layout manually or inherit it from locale settings.