Date Range Picker

Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The controls option supports different values:

  • calendar - will render a calendar view for date range selection
  • date - will render a date scroller or dropdown for date range selection
  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)
  • time - will render a time picker for range selection (explore time ranges)
  • timegrid - will render a time grid for range selection (explore time ranges)
Get started with this example

Demo

Date range with a calendar view

One of the most common ways to represent date range selection is through a calendar view with one or more months. Learn about how to configure and customize the calendar.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    calendarType="month"
    :controls="['calendar']"
    :pages="2"
    :touchUi=""
  />
</template>
Date range with a scroller/dropdown

Passing date to the controls option renders a date scroller or dropdown with customizable start and end labels.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['date']"
    :touchUi=""
  />
</template>
Pre-set date range

By setting the select: 'preset-range' you can pre-set the parameters of the selection rather than let people freely pick start/end dates. The first day and length can be set through the firstSelectDay and selectSize options.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="preset-range"
    display="inline"
    :controls="['calendar']"
    :firstSelectDay="2"
    :selectSize="10"
    :touchUi"
  />
</template>
Using the range with one input

Besides rendering it inline, you can link the range to an input that can be a Mobiscroll input or an existing field. Explore more ways to use the picker.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="range"
    calendarType="month"
    :controls="['calendar']"
    :pages="2"
    :touchUi=""
  />
</template>
Using the range with two inputs

When using two separate inputs for start and end, you will want to initialize the component on the first input and make sure to pass the references of the two inputs through the startInput and endInput options.

Javascript jQuery Angular React Vue 
<script setup>
const startInput = ref(null)
const endInput = ref(null)
</script>
                        
<template>
  <MbscDatepicker
    select="range"
    calendarType="month"
    :controls="['calendar']"
    :startInput="startInput"
    :endInput="endInput"
    :pages="2"
    :touchUi=""
  />
  <MbscInput ref="startInput" label="Start"/>
  <MbscInput ref="endInput" label="End"/>
</template>
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.