How to call custom function on click of action button present on the react rainbow date time picker

Question

I am using DateTimePicker from "react-rainbow-components", I want to call the custom method once we click on the action button like "OK" or "Cancel". I am not sure how we can't do it, since as per the documentation of DateTimePicker it doesn't accept any props to handle that, is this any other workaround we do it solve this problem?

import { DateTimePicker } from "react-rainbow-components";
import { useState } from "react";

export default function App() {
  const [initialState, updatedState] = useState(new Date());
  
  
  return (
    <div className="App">
      <DateTimePicker
        value={initialState}
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        label="DateTimePicker Label"
        onChange={(value) => updatedState(value)}
      />
    </div>
  );
}

score 1 · Answer 1 · answered Sep 14 '22 at 15:36

1

From the Code in the git of this librairy : the props OnChange is Executed when you click on the button with the label "Ok"

https://github.com/nexxtway/react-rainbow/blob/master/src/components/DateTimePicker/pickerModal.js

https://github.com/nexxtway/react-rainbow/blob/master/src/components/TimePicker/timeSelect.js

Do you have some trouble using it ?

answered Sep 14 '22 at 15:36

KALrious

67
1

To add to this. If it didn't you could modify https://github.com/nexxtway/react-rainbow/blob/master/src/components/DateTimePicker/index.js to take a custom prop, pass a function into that new prop, then pass that on to pickerModal.js – wrxsti Sep 14 '22 at 15:41
I tried doing it, however, the problem is onClick of okay, I am using the DateTimePicker component, and I need to call an API to perform certain operations, that can't be done using this. Also close it says on request close props will trigger a custom function for close that too didn’t work, can you please suggest any way if we can use it – Kaifi Asif Sep 14 '22 at 15:55

score 0 · Accepted Answer · answered Sep 14 '22 at 16:30

Here is a work-around solution using okLabel and cancelLabel props. You can listen click events of okLabel and cancelLabel by passing them as a jsx param.

This is the React code:

import { DateTimePicker } from 'react-rainbow-components';
import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [initialState, updatedState] = useState(new Date());

  const okClickHandler = () => {
    console.log('ok clicked');
  };

  const cancelClickHandler = () => {
    console.log('cancel clicked');
  };

  return (
    <div className="App">
      See console logs
      <DateTimePicker
        value={initialState}
        minDate={new Date(2022, 0, 4)}
        maxDate={new Date()}
        label="DateTimePicker Label"
        onChange={(value) => updatedState(value)}
        okLabel={
          <span className="clickableSpan" onClick={okClickHandler}>
            Ok
          </span>
        }
        cancelLabel={
          <span className="clickableSpan" onClick={cancelClickHandler}>
            Cancel
          </span>
        }
      />
    </div>
  );
}

And this is the related css:

.clickableSpan {
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-radius: 100px;
}

#time-picker_ok-button {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#time-picker_cancel-button {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

You can take a look at this stackblitz for a live working example of this work-around solution.

your solution is correct, but it will not trigger the callback function if we click on the (X) icon on the top or if we press the Esc button from the keyboard, although the date picker is closed. Is there a way we can solve that too? — Kaifi Asif, Sep 16 '22 at 15:36
Here is [another workaround solution](https://stackblitz.com/edit/react-ms7c7a?file=src%2FApp.js,src%2Findex.js) for you. This time, it triggers whenever the modal is closed, doesn't matter by how. — Ahmet Emre Kilinc, Sep 16 '22 at 16:16

How to call custom function on click of action button present on the react rainbow date time picker

2 Answers2