How do I adjust the two React datepickers in same row without changing their positions

Question

I am new to ReactJS world how do I adjust the datepicker fileds, requirement is to start date and end date should be in same row.

I able to create start Date and end date two fields. when I select start date it opens the calendar but at the same time end date field position getting changed.

can you please let me know what is the correct way.

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;

Before click the start date field

Answer 1

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

Answer 2

This is how I did it for my Date Range field using 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 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/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 moment
7. npm install @material-ui/core

Answer 4

Finally, I am able to fix!!!. after adding the below code to css file, datepicker working fine

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 5

You should put those 2 components in a div container and apply flex to that container. Learn about CSS flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/