0
201
ViewsIs there a way to bind the selected date in a calendar date picker to a variable that can be accessed by another file?
I am working on a React application and currently have a date picker to select a date range using Ant Design. I want to store the value of the selected date into a variable that can be accessed by another file in my program. How can I bind the selected value into a variable? Here is the JavaScript code for my date picker:
<p>Select a date range: </p>
</div>
<div className="left">
<Space direction="vertical" size={12}>
<RangePicker
format="YYYY-MM-DD"
onChange={this.onChange}
onOk={onOk}
/>
</Space>
·
Juan Pablo Isaza
1 answers
Answer question0
Check the following example, You can store the date values in a variable once the date is selected and onChange function is called.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Space } from 'antd';
import 'antd/dist/antd.css';
import './index.css';
const { RangePicker } = DatePicker;
const Demo = () => {
let selecteddate;
let selectedstartdate;
let selectedenddate;
const onChange = (value) => {
selecteddate = value;
selectedstartdate = value[0];
selectedenddate = value[1];
//Pass the following values
console.log("selecteddate:",selecteddate);
console.log("selectedstartdate:",selectedstartdate);
console.log("selectedenddate:",selectedenddate);
};
return (
<>
<p>Select a date range: </p>
<Space direction="vertical" size={12}>
<RangePicker format="YYYY-MM-DD" onChange={onChange} />
</Space>
</>
);
};
export default Demo
Screenshot
·
Juan Pablo Isaza
Report
Answer question