Question

当前发生的情况是，只有在单击日历图标时才打开日期选择器，但是当单击输入字段和单击日历图标时都需要打开日期选择器。我发现有一个onclick道具，但是我不知道如何添加功能来触发对话框打开。这是我的代码

Schema::create('courses', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('user_id')->unsigned();
            $table->foreign('user_id')->references('id')->on('users')->onUpdate('cascade');   
    });

Answer 1

我找到了一个没有引用的简单解决方案

在open组件上使用KeyboardDatePicker道具

想法是将值设置为true onClick和false onClose

源代码：

 setPickerStatus = (status: boolean) => {
    this.setState({
      open: status
    });
  };

  render() {
    return (
      <KeyboardDatePicker
        onClick={() => this.setPickerStatus(true)}
        onClose={() => this.setPickerStatus(false)}
        open={this.state.open}
        ...
      />
    );
  }

Answer 2

<MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                    InputProps={{readOnly: true}}
                    onClick={() => setIsPickerOpen(true)}
                    open={isYearPickerOpen}
                    onClose={() => setIsPickerOpen(false)} />
</MuiPickersUtilsProvider>

仅此而已。

Answer 3

如果要在单击DatePicker之后打开DatePicker，则不需要，因为它是由库自动打开的，但是如果要在单击期间执行某些功能，则可以使用onClick事件。这是示例：

import 'date-fns';
import React from 'react';
import {MuiPickersUtilsProvider, KeyboardDatePicker} from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import FormControl from "@material-ui/core/FormControl";

export default function KeyboardDatePickerExample(props) {

    function handleChange(e) {
        console.log(e);
    }

    function handleClick(e) {
        console.log(e, 'click');
    }

    return (
        <FormControl>
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                    variant="inline"
                    fullWidth
                    margin="normal"
                    KeyboardButtonProps={{
                        "aria-label": "change date",
                    }}
                    autoOk
                    // value={field.value || null}
                    // onClose={handleTouch}
                    onChange={handleChange}
                    // onTouchEnd={handleTouch}
                    // onBlur={handleTouch}
                    onClick={handleClick}
                    PopoverProps={{
                        anchorOrigin: {horizontal: "left", vertical: "bottom"},
                        transformOrigin: {horizontal: "left", vertical: "top"},
                    }}
                />
            </MuiPickersUtilsProvider>
        </FormControl>
    )
}

但是，如果要从外部显示DatePicker，请单击。假设您有一个按钮，并且想要在该按钮上单击以显示DatePicker，然后可以按照以下示例进行操作：

import * as Dom from 'react-dom';
import * as React from 'react';
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';
import {MuiThemeProvider} from 'material-ui/styles';

export class MyComponent extends React.Component {
    state = {
        selectedDate: new Date()
    };

    setDatePickerDialogReference = (ref) => {
        // React passes undefined/null if the reference has been unmounted.
        if (ref) {
            // Overwrite the dialog's handleRequestClose and handleWindowKeyUp functions.
            ref.handleWindowKeyUp = (...args) => console.log("Dialog tried to call handleWindowKeyUp.");
            ref.handleRequestClose = (...args) => console.log("Dialog tried to call handleRequestClose.");
        }

        this.datePickerDialog = ref;
    };

    openDatePicker = () => {
        this.datePickerDialog.show();
    };

    openDatePickerOnEnter = (e: React.KeyboardEvent<any>) => {
        if (e.key === "Enter") {
            this.openDatePicker();
        }
    };

    setDateReceived(date: Date) {
        this.setState({selectedDate: date});
    }

    render() {
        return (
            <div>
                <h1>{`Date Selected: ${this.state.selectedDate.toLocaleDateString()}`}</h1>
                <ol>
                    <li>{`Select the text field.`}</li>
                    <li>{`Press tab to select the button next.`}</li>
                    <li>{`Press enter with the button selected to open the DatePickerDialog.`}</li>
                </ol>
                <input
                    tabIndex={0}
                    type={"text"}
                    style={{width: 300, margin: "10px, 0"}}
                    value={"Select me, then press tab and enter."}
                    readOnly/>
                <div tabIndex={1}>
                    <button
                        type={"button"}
                        onKeyUp={e => this.openDatePickerOnEnter(e)}
                        onClick={e => this.openDatePicker()}>
                        {"Open DatePicker"}
                    </button>
                </div>
                <MuiThemeProvider>
                    <DatePickerDialog
                        ref={r => this.setDatePickerDialogReference(r)}
                        firstDayOfWeek={0 /* Must provide firstDayOfWeek or rendering of calendar will be broken. */}
                        autoOk={false}
                        onAccept={date => this.setDateReceived(date)}
                        initialDate={this.state.selectedDate}/>
                </MuiThemeProvider>
            </div>
        )
    }
}

Source

更新代码

import * as Dom from 'react-dom';
import * as React from 'react';
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';
import {MuiThemeProvider} from 'material-ui/styles';

export class MyComponent extends React.Component {
    state = {
        selectedDate: new Date()
    };

    setDatePickerDialogReference = (ref) => {
        // React passes undefined/null if the reference has been unmounted.
        if (ref) {
            // Overwrite the dialog's handleRequestClose and handleWindowKeyUp functions.
            ref.handleWindowKeyUp = (...args) => console.log("Dialog tried to call handleWindowKeyUp.");
            ref.handleRequestClose = (...args) => console.log("Dialog tried to call handleRequestClose.");
        }

        this.datePickerDialog = ref;
    };

    openDatePicker = () => {
        this.datePickerDialog.show();
    };

    openDatePickerOnEnter = (e: React.KeyboardEvent<any>) => {
        if (e.key === "Enter") {
            this.openDatePicker();
        }
    };

    setDateReceived(date: Date) {
        this.setState({selectedDate: date});
    }

    render() {
        return (
            <div>
                <h1>{`Date Selected: ${this.state.selectedDate.toLocaleDateString()}`}</h1>
                <input
                    tabIndex={0}
                    type={"text"}
                    style={{width: 300, margin: "10px, 0"}}
                    value={"Select me, then press tab and enter."}
                    onClick={e => this.openDatePicker()} />
                <MuiThemeProvider>
                    <DatePickerDialog
                        ref={r => this.setDatePickerDialogReference(r)}
                        firstDayOfWeek={0 /* Must provide firstDayOfWeek or rendering of calendar will be broken. */}
                        autoOk={false}
                        onAccept={date => this.setDateReceived(date)}
                        initialDate={this.state.selectedDate}/>
                </MuiThemeProvider>
            </div>
        )
    }
}

单击输入字段时如何打开mui KeyboardDatePicker对话框

3 个答案: