Question

在我的TODO列表应用中，我有一个名为startDate的datepicker字段，我希望其默认日期为当前日期。

这是代码：我尝试定义defaultValue，但是由于未定义日期，这给了我错误。

选择代码：

                  <Label for="start">Start Date</Label>
                  <Input
                    type="date"
                    name="startDate"
                    //defaultValue= {this.state.activeItem.date}
                    value={this.state.activeItem.startDate}
                    onChange={this.handleChange}
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="end">End Date</Label>
                  <Input
                    type="date"
                    name="endDate"
                    value={this.state.activeItem.endDate}
                    onChange={this.handleChange}

这是我编写的用于获取默认日期的代码：

     curr.setDate(curr.getDate());
     var date = curr.toISOString().substr(0,10);

我无法在构造函数或render方法中执行上述操作。

这是完整的课程代码

export default class CustomModal extends Component {
      constructor(props) {
        super(props);
        this.state = {
          activeItem: this.props.activeItem
        };
      }
      handleChange = e => {
        let { name, value } = e.target;
        if (e.target.type === "checkbox") {
          value = e.target.checked;
        }
        const activeItem = { ...this.state.activeItem, [name]: value };
        this.setState({ activeItem });
      };
      render() {
        const { toggle, onSave } = this.props;
        return (
          <Modal isOpen={true} toggle={toggle}>
            <ModalHeader toggle={toggle}> Todo Item </ModalHeader>
            <ModalBody>
              <Form>
                <FormGroup>
                  <Label for="title">Title</Label>
                  <Input
                    type="text"
                    name="title"
                    value={this.state.activeItem.title}
                    onChange={this.handleChange}
                    placeholder="Enter Todo Title"
                  />
                  <FormGroup>
                  <Label for="start">Start Date</Label>
                  <Input
                    type="date"
                    name="startDate"
                    //defaultValue= {this.state.activeItem.date}
                    value={this.state.activeItem.startDate}
                    onChange={this.handleChange}
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="end">End Date</Label>
                  <Input
                    type="date"
                    name="endDate"
                    value={this.state.activeItem.endDate}
                    onChange={this.handleChange}
                  />
                </FormGroup>
                </FormGroup>
                <FormGroup>
                  <Label for="description">Description</Label>
                  <Input
                    type="text"
                    name="description"
                    value={this.state.activeItem.description}
                    onChange={this.handleChange}
                    placeholder="Enter Todo description"
                  />
                </FormGroup>
                <FormGroup check>
                  <Label for="completed">
                    <Input
                      type="checkbox"
                      name="completed"
                      checked={this.state.activeItem.completed}
                      onChange={this.handleChange}
                    />
                    Completed
                  </Label>
                </FormGroup>
              </Form>
            </ModalBody>
            <ModalFooter>
              <Button color="success" onClick={() => onSave(this.state.activeItem)}>
                Save
              </Button>
            </ModalFooter>
          </Modal>
        );
      }
    }

Answer 1

一种方法：

export default class CustomModal extends Component {
      constructor(props) {
        super(props);

        var date = new Date();

        var formatedDate = `${date.getMonth()+1}-${date.getDate()}-${date.getFullYear()}`

        this.state = {
          // Use object destructuring to create a new object with the default value
          activeItem: {
            startDate: formatedDate
            // But if the startDate exists on the prop item, it will be replaced.
            ...this.props.activeItem
          }
        };
      }
      //...

但是它只会设置默认值一次，如果要保存它以备后用，只需将其添加到状态并像以前一样使用defaultValue。

export default class CustomModal extends Component {
      constructor(props) {
        super(props);
        // Assuming that this code gives you the date on the right format

        var date = new Date();

        var formatedDate = `${date.getMonth()+1}-${date.getDate()}-${date.getFullYear()}`

        this.state = {
          startingDate: formatedDate,
          activeItem: {
...
          <Input
            type="date"
            name="startDate"
            defaultValue={this.state.startingDate}
            value={this.state.activeItem.startDate}
            onChange={this.handleChange}
          />
...

Answer 2

在您的应用程序中使用这一行代码

const abc = this.state.startDate.getDate() + "/" + (this.state.startDate.getMonth() + 1) + "/" + this.state.startDate.getFullYear()

您可以使用任何名称代替startDate。它会给dd/mm/yyyy

在不使用DatePicker组件的情况下使用react js在日期选择器中默认今天的日期

2 个答案: