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 
<mbsc-datepicker
    [controls]="['time']"
    select="range"
    display="inline"
    [touchUi]="">
</mbsc-datepicker>
Time range selection with a time grid

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

Javascript jQuery Angular React Vue 
<mbsc-datepicker
    [controls]="['timegrid']"
    select="range"
    [touchUi]="">
</mbsc-datepicker>
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 
<mbsc-datepicker
    [controls]="['time']"
    select="range"
    [touchUi]="">
</mbsc-datepicker>
Using the range with two inputs

Sometimes it makes sense to use two separate inputs for start and end. You can pass a reference through the startInput and endInput options of mobiscroll or any type of input, like an ion-input.

Javascript jQuery Angular React Vue 
<mbsc-datepicker
    [controls]="['time']"
    select="range"
    [startInput]="start"
    [endInput]="end"
    [touchUi]="">
</mbsc-datepicker>

<mbsc-input
    #start
    placeholder="Please Select...">Start
</mbsc-input>

<mbsc-input
    #end
    placeholder="Please Select...">End
</mbsc-input>
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.