如何调整同一行中的两个 React 日期选择器而不改变它们的位置

Question

我是 ReactJS 世界的新手，如何调整日期选择器字段， 要求是开始日期和结束日期应该在同一行。

我能够创建开始日期和结束日期两个字段。 当我选择开始日期时，它会打开日历，但同时结束日期字段位置会发生变化。

你能让我知道什么是正确的方法吗？

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "./App.css";
import "react-datepicker/dist/react-datepicker.css";
import addMonths from 'date-fns/addMonths';
import format from 'date-fns/format';
import FileSaver from 'file-saver';
import './download.css';
import axios from "axios";


function App() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleStartDate = (date) => {
    setStartDate(date);
    setEndDate(null);
  };

  const handleEndDate = (date) => {
    setEndDate(date);
  };

  const mySubmitHandler = (event) => {
    event.preventDefault();
    alert("You are submitting " + this.state.startdate +"and"+ this.state.enddate);
  }
 

  const  handleDownload = (url, filename) => {
    console.log("download");
  }


  const downloadEmployeeDataAxios = () => { 
    console.log(headers);
    axios({
    url: 'http://localhost:8080/v1/staff-notification/cms/content-news',
    method: 'GET',
    responseType: 'blob'
},{ headers:headers}).then((response) => {
  console.log(response);
     var fileURL = window.URL.createObjectURL(new Blob([response.data]));
     var fileLink = document.createElement('a');
    
     fileLink.href = fileURL;
     fileLink.setAttribute('download', 'file.json');
     document.body.appendChild(fileLink);
     
     fileLink.click();
}).catch(err =>{ 
  console.log(err);
});
}



  return (
    <div className="App" id="container">
      <div className="input-container">
      <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"></link>
      <img src="\is.jpg"  id="ui-image"></img>
      <h3 id="font-style">Please select the Date range of .CSV </h3>
      <script></script>
        <div id="light" >
          <DatePicker id="startDate-css"
          placeholderText='Start Date'
          dateFormat='dd/MM/yyyy'
            selected={startDate}
          //  minDate={new Date()}
            onChange={handleStartDate}
          />
        <span>   <b>-</b>    </span>
          <DatePicker id="endDate-css"
          placeholderText='End Date'
          dateFormat='dd/MM/yyyy'
            selected={endDate}
            minDate={startDate}
            onChange={handleEndDate}
          />
          <p  style={{fontSize: 10}}><b>Note: Only up to 3 years worth of Data can be downloaded</b></p>

          {/* {startDate && endDate &&  <input 
      type='submit' value="Download" class="bi bi-cloud-arrow-down"  style={{ width: '10%', height: 30}}
    />} */
    startDate && endDate &&  <button id='article' class="bi bi-cloud-arrow-down" onClick={downloadEmployeeDataAxios}>Download</button>}
        </div>
      
      </div>
    
    </div>
  );
}

export default App;

在单击开始日期字段之前

Answer 1

您应该将这 2 个组件放入 div 容器中，并将 flex 应用于该容器。在这里了解 CSS flex：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

终于，我能够修复了！ 将以下代码添加到 css 文件后，日期选择器工作正常

form{
  display: flex; /* 2. display flex to the rescue */
  flex-direction: row;
 }

 label, input {
    display: block; /* 1. oh noes, my inputs are styled as block... */
  }

Answer 3

import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import {moment} from 'moment';
import {
    MuiPickersUtilsProvider,
    KeyboardTimePicker,
    KeyboardDatePicker,
} from '@material-ui/pickers';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    button: {
        margin: theme.spacing(1),
    },
}));

export default function MaterialUIPickers() {
    // The first commit of Material-UI
    const [selectedDate, setSelectedDate] = React.useState(null);
    const [endDate, setEndDate] = React.useState(null);
    const classes = useStyles();

  
    
   

    const handleDateChange = (date) => {
        setSelectedDate(date);
    };

    const handleEndDateChange = (date) => {
        setEndDate(date);
    };


    return (
        <div class="row">
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <Grid container justifyContent="center">
                    <KeyboardDatePicker
                        margin="normal"
                        maxDate={new Date()}
                        id="date-picker-dialog"
                        label="Start Date"
                        format="MM-dd-yyyy"
                        value={selectedDate}
                        onChange={handleDateChange}
                        KeyboardButtonProps={{
                            'aria-label': 'change date',
                        }}
                    />
                    <span>  </span>
                    <KeyboardDatePicker
                        margin="normal"
                        maxDate={new Date()}
                        id="date-picker-dialog"
                        label="End Date"
                        format="MM-dd-yyyy"
                        value={endDate}
                        onChange={handleEndDateChange}
                        KeyboardButtonProps={{
                            'aria-label': 'change date',
                        }}
                    />
                </Grid>
                <Grid container justifyContent="center">
                    {selectedDate && endDate && <Button
                        variant="contained"
                        color="primary"
                        className={classes.button}
                        endIcon={<Icon>send</Icon>}
                    >
                        Send
                    </Button>}
                </Grid>

            </MuiPickersUtilsProvider>

        </div>
    );

}

1. npm i --save date-fns@next @date-io/[电子邮件受保护]
2. npm 安装 date-fns @types/date-fns
3. npm 安装@material-ui/core@next
4. npm 安装@material-ui/pickers
5. npm 我@date-io/[电子邮件受保护] date-fns
6. npm 我@date-io/[电子邮件受保护]时刻
7. npm 安装@material-ui/core

Answer 4

这就是我使用 Bootstrap 5.2 为日期范围字段所做的事情

<div className="input-group">
  <DatePicker
    name="from_field"
    onChange={(val) => {
      console.log(val)
    }}
    className="border-0 w-100"
    wrapperClassName="form-control border"
  />
  <DatePicker
    name="to_field"
    onChange={(val) => {
      console.log(val)
    }}
    className="border-0 w-100"
    wrapperClassName="form-control border"
  />
  <div className="input-group-text">
    <input
      className="form-check-input mt-0"
      type="checkbox"
      aria-label="Range"
    />
  </div>
</div>

Answer 5

          <View style={{ flexDirection: "row", justifyContent: "center" }}>
            <View style={{ width: "40%" }}>
              <DateTimePicker
                testID="dateTimePicker"
                value={basestartdate || new Date()}
                mode="date"
                display="default"
                is24Hour={true}
                onChange={handleStartDate}
                textColor="#fff"
              />
            </View>
            <View style={{ width: "30%" }}>
              <DateTimePicker
                testID="dateTimePicker"
                value={basestartdate || new Date()}
                mode="time"
                display="default"
                is24Hour={true}
                onChange={handleStartDate}
                textColor="#fff"
              />
            </View>
          </View>