Time Range Picker

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

  • time - will render a time picker or dropdown for range selection
  • timegrid - will render a time grid for 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)
  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)
Get started with this example

Demo

Embeddable time range

Use the time range inline by setting the display option to inline. Learn about the different ways to use the picker.

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

For a time grid rendering pass 'timegrid' to the controls option.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['timegrid']"
    :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 the different ways to display the picker.

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