Material-Duration-Picker

Simple duration picker inspired by Material-UI Pickers

To install

npm install --save material-duration-picker

or

yarn add material-duration-picker

Dependencies:

• Material-UI
• React

To use:

This example uses date-fns to format the duration

import {DurationPicker} from "./durationPicker";
import {formatDuration} from 'date-fns'

const Comp = () => {
  const [value, setValue] = useState(0)
  return (
    <div>
      <DurationPicker
        label='Duration'
        value={value}
        onValueChange={(v) => setValue(v)}
        formatDuration={formatDuration}
      />
    </div>
  );
}

material-duration-picker-demo.mp4

Props

• value: (REQUIRED) The duration value in seconds
• onValueChange: (REQUIRED) On change callback
• formatDuration: function to customize the way that the duration is formatted
• views: Array of views to offer. MUST BE FROM BIGGEST TO SMALLEST ex: ['weeks', 'minutes', 'seconds']
• disableEditDialog: If should not enable the edit dialog on click of the field
• DurationDialogProps: Props passed to the dialog

Remaining props are passed to the TextField component

Localisation

#1 (comment)

Sandbox example