Material-duration-picker NPM

Material-Duration-Picker

Simple duration picker inspired by Material-UI Pickers

To install

npm install --save material-duration-picker

yarn add material-duration-picker

Dependencies:

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>
  );
}

demo

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