Date & Time Range Picker

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

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

Demo

Range with a calendar and time picker

One of the most common ways to represent date range selection is through a calendar with or without a time picker. Learn how to build a date-only picker.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['date']"
    :touchUi=""
  />
</template>
Range with a calendar and time grid

Instead of selecting time from a list of values you can show a grid by passing 'timegrid' to the controls option.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['calendar', 'timegrid']"
    :touchUi=""
  />
</template>
Range with a scroller/dropdown

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

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['datetime']"
    :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"
    :controls="['datetime']"
    :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
    :controls="['datetime']"
    select="range"
    :startInput="startInput"
    :endInput="endInput"
    :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.