如何在不改变位置的情况下调整同一行中的两个 React 日期选择器

问题描述

我是 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;

点击开始日期字段前

解决方法

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

,

终于，我能够修复了！！！。 将以下代码添加到 css 文件后，datepicker 工作正常

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... */
  }

,

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/date-fns@1.x
2. npm install date-fns @types/date-fns
3. npm install @material-ui/core@next
4. npm install @material-ui/pickers
5. npm i @date-io/date-fns@1.x date-fns
6. npm i @date-io/moment@1.x 时刻
7. npm install @material-ui/core