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

Posted 2023-02-21

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

【英文标题】：How do I adjust the two React datepickers in same row without changing their positions

【发布时间】：2021-08-26 01:33:22

【问题描述】：

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

点击开始日期字段之前

【问题讨论】：

绝对位置可能会起作用

将 css 应用于容器 <div id="light">，将其子元素布局在同一行中。我推荐使用 flexbox 来完成此类任务。

【参考方案1】：

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【参考方案2】：

终于，我能修复了！！！。 将以下代码添加到 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... */
  

【参考方案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>
    );

npm i --save date-fns@next @date-io/date-fns@1.x npm install date-fns @types/date-fns npm install @material-ui/core@next npm install @material-ui/pickers npm i @date-io/date-fns@1.x date-fns npm i @date-io/moment@1.x 时刻 npm install @material-ui/core