如何调整同一行中的两个React日期选取器而不更改其位置

wooyq4lh 于 2022-12-14 发布在 React

关注(0)|答案(4)|浏览(143)

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

单击开始日期字段之前

react-native

来源：https://stackoverflow.com/questions/67897489/how-do-i-adjust-the-two-react-datepickers-in-same-row-without-changing-their-pos

4条答案

按热度按时间

t98cgbkg1#

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

赞(0）回复(0）举报 2022-12-14

koaltpgm2#

最后，我能够修复！！！.添加以下代码到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... */
  }

赞(0）回复(0）举报 2022-12-14

flvlnr443#

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>
    );

}