如何编辑Material-UI-Time-Picker的时间选择器? [英] How to edit the time picker of material-ui-time-picker?

问题描述

我有一个 material-ui-time-picker ，我想控制此输入，效果很好，但是我想编辑从键盘输入的时间，而不是单击输入时在时钟上.

我的代码是:

  import React，{组件}来自"react"；从"material-ui-time-picker"导入{TimePicker}；从"@ material-ui/core"导入{输入为时间，对话框为时钟}；openDialog =()=>this.setState({isOpen:true});closeDialog =()=>this.setState({isOpen:false});handleDialogTimeChange = newValue =>{const hours = newValue.getHours().toString().padStart(2，"0");const分钟= newValue.getMinutes().toString().padStart(2，"0");const textValue =小时+:" +分钟；this.setState({ time: textValue });};handleKeyboardTimeChange = time =>this.setState({time});createDateFromTextValue = value =>{const splitParts = value.split(:");返回新的Date(1970，1，1，splitParts [0]，splitParts [1]);};使成为() {返回 (< div><时间值= {this.state.time}onChange = {this.handleKeyboardTimeChange}endAdornment = {< InputAdornment position ="end">< IconButton onClick = {this.openDialog}>< AccessTime/></IconButton></InputAdornment>}//}/><时钟maxWidth ="xs" open = {this.state.isOpen}>< TimePickermode ="24h"值= {this.createDateFromTextValue(this.state.time)}onChange = {this.handleDialogTimeChange}autoOk = {true}cancelLabel ="okLabel ="占位符="disableUnderline = {true}/></时钟></div>);} 

我的沙箱: https://codesandbox.io/s/vm9wm19p27

当我运行它时，我得到了这个输入，但是当我编辑他的值时，该输入将消失.

我该如何解决?

我认为 TimeInput 组件不允许这样做，但是您可以编写自己的组件来创建所需的确切行为.而不是从包中导入 TimeInput ，而是从包中导入 {TimePicker} 并创建一个自定义组件.

这绝不是傻瓜，但它将为您提供继续学习的基础知识.工作示例: https://codesandbox.io/embed/5l167pzrx

  import React，{useState} from"react";从'@ material-ui/core'导入{Button，Input，InputAdornment，IconButton，Dialog，DialogActions};从'material-ui-time-picker'导入{TimePicker};从'@ material-ui/icons/AccessTime'导入AccessTime；函数CustomDatePicker(){const [isOpen，setIsOpen] = useState(false);const [value，setValue] = useState('10:10');const openDialog =()=>setIsOpen(true);const closeDialog =()=>setIsOpen(false);const handleDialogTimeChange =(newValue)=>{const hours = newValue.getHours().toString().padStart(2, "0");const分钟= newValue.getMinutes().toString().padStart(2，"0")const textValue =小时+':'+分钟;setValue(textValue);}const handleKeyboardTimeChange =(事件)=>setValue(event.target.value);const createDateFromTextValue = value =>{const splitParts = value.split(':');返回新的Date(1970，1，1，splitParts [0]，splitParts [1]);}返回 (< div><输入值= {值}onChange = {handleKeyboardTimeChange}endAdornment = {< InputAdornment position ="end">< IconButton onClick = {openDialog}>< AccessTime/></IconButton></InputAdornment>}/>< Dialog maxWidth ='xs'open = {isOpen}>< TimePicker mode ='24h'value = {createDateFromTextValue(value)} onChange = {handleDialogTimeChange}/>< DialogActions>< Button onClick = {closeDialog} color ='primary'>取消</按钮>< Button onClick = {closeDialog} color ='primary'>好的</按钮></DialogActions></Dialog></div>)}导出默认的CustomDatePicker 

I have a material-ui-time-picker and I want to control this input, it works well, but I want to edit the time input from the keyboard and not when I click the input on the clock.

My code is :

import React, { Component } from "react";
import { TimePicker } from "material-ui-time-picker";
import { Input as Time, Dialog as Clock } from "@material-ui/core";

openDialog = () => this.setState({ isOpen: true });
  closeDialog = () => this.setState({ isOpen: false });
  handleDialogTimeChange = newValue => {
    const hours = newValue
      .getHours()
      .toString()
      .padStart(2, "0");
    const minutes = newValue
      .getMinutes()
      .toString()
      .padStart(2, "0");
    const textValue = hours + ":" + minutes;
    this.setState({ time: textValue });
  };
  handleKeyboardTimeChange = time => this.setState({ time });
  createDateFromTextValue = value => {
    const splitParts = value.split(":");
    return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
  };
render() {

    return (

      <div>
        <Time
          value={this.state.time}
          onChange={this.handleKeyboardTimeChange}
          endAdornment={
            <InputAdornment position="end">
              <IconButton onClick={this.openDialog}>
                <AccessTime />
              </IconButton>
            </InputAdornment>
          }
          //}
        />
        <Clock maxWidth="xs" open={this.state.isOpen}>
          <TimePicker
            mode="24h"
            value={this.createDateFromTextValue(this.state.time)}
            onChange={this.handleDialogTimeChange}
            autoOk={true}
            cancelLabel=""
            okLabel=""
            placeholder=""
            disableUnderline={true}
          />
        </Clock>
      </div>
    );
  }

My sandbox: https://codesandbox.io/s/vm9wm19p27

When I run it, I get this input, but when I edit his value, the input will be disappeared.

How can I fix it ?

解决方案

I think the TimeInput component doesn't allow this, but you can write your own component to create the exact behavior you want. Instead of importing TimeInput import { TimePicker } from the package and create a custom component.

This is in no way fool proof but it will give you the basics to continue. Working example: https://codesandbox.io/embed/5l167pzrx

import React, { useState } from "react";
import { Button, Input, InputAdornment, IconButton, Dialog, DialogActions } from '@material-ui/core';
import { TimePicker } from 'material-ui-time-picker';
import AccessTime from '@material-ui/icons/AccessTime';

function CustomDatePicker() {
  const [isOpen, setIsOpen] = useState(false);
  const [value, setValue] = useState('10:10');

  const openDialog = () => setIsOpen(true);
  const closeDialog = () => setIsOpen(false);

  const handleDialogTimeChange = (newValue) => {
    const hours = newValue.getHours().toString().padStart(2, "0");
    const minutes = newValue.getMinutes().toString().padStart(2, "0")
    const textValue = hours + ':' + minutes;
    setValue(textValue);
  }
  const handleKeyboardTimeChange = (event) => setValue(event.target.value);

  const createDateFromTextValue = value => {
    const splitParts = value.split(':');
    return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
  }

  return (
    <div>
      <Input
        value={value}
        onChange={handleKeyboardTimeChange}
        endAdornment={
        <InputAdornment position="end">
          <IconButton onClick={openDialog}>
            <AccessTime />
          </IconButton>
        </InputAdornment>
      }
      />
      <Dialog maxWidth='xs' open={isOpen}>
        <TimePicker mode='24h' value={createDateFromTextValue(value)} onChange={handleDialogTimeChange} />
        <DialogActions>
        <Button onClick={closeDialog} color='primary'>
          Cancel
        </Button>
        <Button onClick={closeDialog} color='primary'>
          Ok
        </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

export default CustomDatePicker

这篇关于如何编辑Material-UI-Time-Picker的时间选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！