[React] react-admin TimeInput 구현

react-admin Document에 보면 DateInput 이나 DateTimeInput은 존재하는데 TimeInput은 없다.

문서에는 timepicker 를 이용하라고 나와있는데 Timepicker 를 이용하여 구현하였다.

 

Timeinput.js

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import {TextInput} from "ra-ui-materialui"

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    width: 200,
  },
});

function TimeInput(props) {
  const {classes, source, label} = props;
  return (
      <TextInput
          source={source}
          label={label}
          type="time"
          className={classes.textField}
          InputLabelProps={{
            shrink: true,
          }}
          inputProps={{
            // step: 300, // 5 min
          }}
      />
  );
}

TimeInput.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TimeInput);

Edit.js

<TimeInput source="usedTime" label="사용된 시간" validate={required}/>

 

이런식으로 사용하면 여러분이 생각하는 Timeinput의 기능을 사용 할 수 있다.

 

https://material-ui.com/components/pickers/#date-pickers