hpos-web/src/components/ExportData.js

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import moment from 'moment';

import "react-datepicker/dist/react-datepicker.css";

import './ExportData.css';

function ExportData({ url, show }) {
    const [startDate, setStartDate] = useState("");
    const [endDate, setEndDate] = useState("");

    const fetchFile = (start_date, end_date) => {
        window.location.href = `https://asia-south1-hpos-af3cc.cloudfunctions.net/consolidation?start_date=${moment(startDate).format("YYYY-MM-DD")}&end_date=${moment(endDate).format("YYYY-MM-DD")}`;
    }

    return (
        <div>
            <div className='dates'>
                <div className='start-date'>
                    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} placeholderText='start date' />
                </div>
                <div className='end-date'>
                    <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} placeholderText='end date' />
                </div>

                <div className='button' onClick={() => fetchFile(startDate, endDate)}>Download Excel</div>
            </div>
        </div>
    );
}
export default ExportData;