Hi Gowtham,
Thanks for contacting Syncfusion Support.
We have checked with your query “How to get the selected date in ej2-react-calendar”. This can be achieved in two ways.
Case 1: Using change event
We can get the current selected date value on selecting a date in the calendar from the arguments of the change event as shown in the below code snippet.
|
[index.tsx]
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { CalendarComponent, ChangedEventArgs } from '@syncfusion/ej2-react-calendars';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}>
{
render() {
return (
<div className='control-pane'>
<div className='control-section'>
<div className='calendar-control-section' style={{ overflow: 'auto' }}>
<CalendarComponent change={onchange} ></CalendarComponent>
<label id='date_label'>Selected Value: </label>
</div>
</div>
</div>
)
}
}
function onchange(args: ChangedEventArgs): void {
/*Displays selected date in the label*/
(document.getElementById('date_label') as HTMLElement).textContent = 'Selected Value: ' + args.value.toLocaleDateString();
}
ReactDOM.render(<Default />, document.getElementById('sample')); |
For your convenience, we have created a sample based on your requirement and attached in the blow sample. Please check it.
Case 2: Value API
We can also get the value of the Calendar component using Value API which returns the current selected value of the Calendar component.
To know more about all available API, events and methods of Calendar component, please check the below document link.
Regards,
Prem Kumar. M
