timepicker-ui
4.7.0GitHub
timepicker-ui
GitHub4.7.0
Plugins / Range Mode

Range Plugin

Select time ranges with "from" and "to" segments. Automatic validation blocks invalid time selections. It works in the clock, wheel and compact-wheel modes.

Docs: Plugins

Basic Range

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';


PluginRegistry.register(RangePlugin);


const picker = new TimepickerUI(input, {
  range: {
    enabled: true
  }
});
picker.create();

Custom Labels

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';


PluginRegistry.register(RangePlugin);


const picker = new TimepickerUI(input, {
  range: {
    enabled: true
  },
  labels: {
    rangeFrom: 'Start',
    rangeTo: 'End'
  }
});
picker.create();

With Duration Constraints

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';


PluginRegistry.register(RangePlugin);


const picker = new TimepickerUI(input, {
  range: {
    enabled: true,
    minDuration: 30,  // min 30 minutes
    maxDuration: 240  // max 4 hours
  }
});
picker.create();

24h Format Range

#
import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';


PluginRegistry.register(RangePlugin);


const picker = new TimepickerUI(input, {
  clock: {
    type: '24h'
  },
  range: {
    enabled: true
  }
});
picker.create();

Range in Wheel Mode

#

With ui.mode: 'wheel' the From and To tabs show with the wheel. A wheel snap fills the active end, and the picker does not move on to To by itself: press the To tab. With linked: true, times before From are disabled on the To wheel. Register WheelPlugin next to RangePlugin. New in 4.7.0.

import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(RangePlugin);
PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'wheel' },
  range: {
    enabled: true,
    linked: true
  }
});
picker.create();

Range in Compact-Wheel Mode

#

ui.mode: 'compact-wheel' keeps the From and To tabs. This one opens as a popover because wheel.placement is set. Without it, compact-wheel opens as a modal. New in 4.7.0.

import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';
import { WheelPlugin } from 'timepicker-ui/plugins/wheel';


PluginRegistry.register(RangePlugin);
PluginRegistry.register(WheelPlugin);


const picker = new TimepickerUI(input, {
  ui: { mode: 'compact-wheel' },
  wheel: { placement: 'auto' },
  range: {
    enabled: true,
    linked: true
  }
});
picker.create();

Range with Auto-Commit on Scroll

#

With wheel.commitOnScroll the range is written to the input as from - to once scrolling stops and the range is valid. range:confirm fires with autoCommit: true, and the picker stays open, also with wheel.hideFooter.

index.ts
const picker = new TimepickerUI(input, {
  ui: { mode: 'compact-wheel' },
  wheel: {
    placement: 'auto',
    hideFooter: true,
    commitOnScroll: true
  },
  range: { enabled: true }
});
picker.create();


picker.on('range:confirm', (data) => {
  console.log(data.from, data.to, data.autoCommit);
});

Range API and Independent Ends

#

setRange(), getRange() and setActivePart() control the range from code. With range.linked: false From and To are independent, so a range can cross midnight: 22:00 to 01:00 is accepted, and minDuration and maxDuration are not checked.

import { TimepickerUI, PluginRegistry } from 'timepicker-ui';
import { RangePlugin } from 'timepicker-ui/plugins/range';


PluginRegistry.register(RangePlugin);


const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  range: { enabled: true }
});
picker.create();


picker.setRange({ from: '09:00', to: '17:00' });
console.log(picker.getRange());


picker.open();
picker.setActivePart('to');


const overnight = new TimepickerUI(otherInput, {
  clock: { type: '24h' },
  range: { enabled: true, linked: false, minDuration: 30 }
});
overnight.create();
overnight.setRange({ from: '22:00', to: '01:00' });
Set Start Only and Captions
#
setRange() takes one end: the other keeps its value. setRangeCaptions() adds a second line under the tab labels, for example a date. Edit a time in the picker to see range:change in the log. API calls do not emit it. New in 4.7.0.
picker.setRange({ from: '09:00' });


picker.setRangeCaptions({ from: 'Wed Oct 21', to: 'Thu Oct 22' });


picker.on('range:change', ({ part, from, to }) => {
  console.log(part, from, to);
});
Esc