Event Hooks
The date picker ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like onChange, onSet, onInit ... will be triggered.
For a complete list of events go to the documentation See available lifecycle events →
Demo
<Datepicker
onActiveDateChange = {(event, inst) => { /* Logic for active date change */ }}
onCancel = {(event, inst) => { /* Logic for cancel button click */ }}
onCellClick = {(event, inst) => { /* Logic for cell click */ }}
onCellHoverIn = {(event, inst) => { /* Logic for cell hover in */ }}
onCellHoverOut = {(event, inst) => { /* Logic for cell hover out */ }}
onChange = {(event, inst) => { /* Logic for value change */ }}
onClose = {(event, inst) => { /* Your custom event handler goes here */ }}
onDestroy = {(event, inst) => { /* Your custom event handler goes here */ }}
onInit = {(event, inst) => { /* Logic running on component init */ }}
onLabelClick = {(event, inst) => { /* Logic for label click */ }}
onOpen = (event, inst) => { /* Your custom event handler goes here */ }}
onPageChange = {(event, inst) => { /* Your custom event handler goes here */ }}
onPageLoaded = {(event, inst) => { /* Use it to inject custom markup & attach custom listeners */ }}
onPageLoading = {(event, inst) => { /* Use it to load data on demand */ }}
onTempChange = {(event, inst) => { /* Logic for temporary value change */ }}
/>Event log
JSXTSX
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<Datepicker
select="range"
label="Range"
labelStyle="stacked"
inputStyle="box"
placeholder="Please Select..."
onActiveDateChange={() => {
// Logic for the active date change
}}
onCancel={() => {
// Logic for cancel button click
}}
onCellClick={() => {
// Logic for event click
}}
onCellHoverIn={() => {
// Logic for handling cell hover in
}}
onCellHoverOut={() => {
// Logic for handling cell hover out
}}
onChange={() => {
// Logic for value change
}}
onClose={() => {
// Your custom event handler goes here
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onInit={() => {
// Logic running on component init
}}
onLabelClick={() => {
// Logic for label click
}}
onOpen={() => {
// Your custom event handler goes here
}}
onPageChange={() => {
// Your custom event handler goes here
}}
onPageLoaded={() => {
// Use it to inject custom markup & attach custom listeners
}}
onPageLoading={() => {
// Use it to load data on demand
}}
onTempChange={() => {
// Logic for temporary value change
}}
/>
</Page>
);
}
export default App;
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<Page>
<Datepicker
select="range"
label="Range"
labelStyle="stacked"
inputStyle="box"
placeholder="Please Select..."
onActiveDateChange={() => {
// Logic for the active date change
}}
onCancel={() => {
// Logic for cancel button click
}}
onCellClick={() => {
// Logic for event click
}}
onCellHoverIn={() => {
// Logic for handling cell hover in
}}
onCellHoverOut={() => {
// Logic for handling cell hover out
}}
onChange={() => {
// Logic for value change
}}
onClose={() => {
// Your custom event handler goes here
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onInit={() => {
// Logic running on component init
}}
onLabelClick={() => {
// Logic for label click
}}
onOpen={() => {
// Your custom event handler goes here
}}
onPageChange={() => {
// Your custom event handler goes here
}}
onPageLoaded={() => {
// Use it to inject custom markup & attach custom listeners
}}
onPageLoading={() => {
// Use it to load data on demand
}}
onTempChange={() => {
// Logic for temporary value change
}}
/>
</Page>
);
export default App;