Duration - javascript helper to input duration

Features

• Lightweight, dependency-free and customizable.
• Four display modes: converter, hiding original input, as supporting popup or switcher.
• Designed as progressive enhancement.
• Two supported formats: ISO and decimal time.

Demos

Simple example

Perfect for standard case.

new Duration('#demo-simple', {
    outputFormat: 'decimal'
});

Preset value

Set default value.

new Duration('#demo-initial-value', {
    initialValue: {
        minutes: '30',
        hours:   '1'
    },
    inputs: ['hours', 'minutes', 'seconds'],
    outputFormat: 'iso'
});

Custom labels

Label hours, minutes etc. as you wish. Useful for internationalization.

new Duration('#demo-labels', {
    inputs: ['hours', 'minutes', 'seconds'],
    labels: {
        seconds: 'seconds',
        minutes: 'minutes',
        hours  : 'hours'
    },
    outputFormat: 'decimal',
    precision: 6
});

Hide original input

Hide original input from users.

new Duration('#demo-widget', {
    display: 'widget',
    labels: {
        minutes: 'even longer minutes',
        hours  : 'long hours'
    },
    outputFormat: 'decimal'
});

Display as popup

Show widget when original input gets focus.

new Duration('#demo-popup', {
    display: 'popup',
    outputFormat: 'decimal'
});

Switcher

Let users decide how they want to input values.

new Duration('#demo-switcher', {
    display: 'switcher',
    outputFormat: 'decimal',
    switcher: {
        firstLabel: 'decimal time',
        secondLabel: 'normal time'
    }
});

Getting started

1. Setup your HTML.

   <input id="demo"/>

   The input can be a child or a sibling of its label. Label is not obligatory, but definitely a best practise.

2. Add duration.js before your closing body tag.

   <script src="duration.js"></script>

3. Initialize duration.

   new Duration('#demo');

Settings

• cssClass

  Type: string

  Default: duration-initialized

  Class added to original input after initialization.

• display

  Type: string

  Default: both

  Indicated widget display. Can take of of the following values:

  • both - original input and the widget are displayed.
  • popup - widget is displayed as popup when original input is gets focus.
  • switcher - only one of original input and widget is displayed at the same time. Switcher allows to toggle between original input and widget.
  • widget - original input is hidden, only widget is displayed.

• initialValue

  Type: object

  Default:

  initialValue: {
      years:   '0',
      months:  '0',
      weeks:   '0',
      days:    '0',
      hours:   '0',
      minutes: '0',
      seconds: '0'
  }

  Initial values for generated inputs.

• inputs

  Type: array

  Default: ['years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds']

  List of inputs to be generated. If you set outputFormat to decimal, only hours and minutes inputs will be generated automatically (days, weeks, months and year are not valid in this context). Use inputs option to decide if you want seconds displayed as well.

• labels

  Type: object

  Default:

  labels: {
      years:   'yrs',
      months:  'mo',
      weeks:   'wks',
      days:    'days',
      hours:   'hrs',
      minutes: 'min',
      seconds: 'sec'
  }

  Default labels for generated inputs.

• outputFormat

  Type: string

  Default: 'iso'

  Can be set to iso or decimal.

• precision

  Type: integer

  Default: 2, if inputs contains seconds precision is set to 5

  Precision used by the widget to format computation result. Be cautious with setting it too high to avoid problems with rounding errors.

• screenReaderText

  Type: string

  Default: 'sr-only'

  To avoid duplication for sighted users additional label can be hidden using specified class. Don't use display: none - it breaks accessibility of the widget.

• sizingElement

  Type: string

  Default: 'input'

  Can be set to input or wrapper.

  Used to size widget when display popup is used. Widget will be positioned and sized correspond to selected element. If no wrapper was given as option default (generated) wrapper will be used.

• switcher

  Type: object

  Default:

  switcher: {
      labelShows: 'alternative',
      firstLabel: 'Switch to input widget',
      secondLabel: 'Switch to preformatted value input',
      initialState: 'first'
  }

  Values to configure switcher.

  • labelShows can take one of two values: alternative or current. If current is chosen, switcher in on state displays on label and off label in off state. If alternative is chosen, switcher displays the other option's name.
  • firstLabel describes switchers on state.
  • secondLabel describes switchers off state.
  • initialState can be first or second and indicated in which state the swicher should be after initialization.

• wrapper

  Type: selector or HTMLElement

  Default: false

  A wrapper containing original input and widget HTML. If set, given element will be used. If not set wrapping element (div) will be created automatically.

Methods

• destroy

  Removes all custom HTML code and event listeners.

Events

• durationinitialized

  Fired when all custom HTML code is ready and event listeners got initialized.

• durationdestroyed

  Fired after completing destroy action.

Get it now

You will find all the code on Github.