Time Input Component in AG Grid

Dash Python
1

Hey :slight_smile:

I have this component that I want to use for my AG Grid table as a way to validate the input in the table.

dagcomponentfuncs.TimePicker= function (props) {
    const { setTime, time } = props;

    function handleChange(event) {
        setTime(event.target.value);
    }

    return React.createElement(
        'input',
        {
            type: 'time',
            value: time,
            onChange: handleChange,
            className: "custom-time-picker",
        },
        null
    );
};

Then I use it in the columnDefs like this

{
        "headerName": "Time To",
        "field": "time_to",
        "wrapText": True,
        "editable": True,
        "cellStyle": {
            "width": "10%",
        },
        "cellRenderer": "TimePicker",
 }

The only problem is that it doesn’t show the time if there is already some data in the table.
image

Any idea how I can fix this, or use another way to validate time input into AG Grid?

Thanks!

2

Found another solution :slight_smile:


dagfuncs.TimePicker = class {
  init(params) {
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    this.eInput.classList.add('ag-input');
    this.eInput.style.border = '0';
    this.eInput.type = "time";

  }

  // gets called once when grid ready to insert the element
  getGui() {
    return this.eInput;
  }

  // focus and select can be done after the gui is attached
  afterGuiAttached() {
    this.eInput.focus();
    this.eInput.select();
  }

  // returns the new value after editing
  getValue() {
    return this.eInput.value;
  }

  // any cleanup we need to be done here
  destroy() {
  }

  // if true, then this editor will appear in a popup
  isPopup() {
    return false;
  }
  }

Created one in the dashAgGridFunctions.js file and used as:


{
        "headerName": "Time To",
        "field": "time_to",
        "wrapText": True,
        "editable": True,
        "cellStyle": {
            "width": "10%",
        },
        "cellEditor": {"function": "TimePicker"},
 }
3

Found another solution :slight_smile:


dagfuncs.TimePicker = class {
  init(params) {
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    this.eInput.classList.add('ag-input');
    this.eInput.style.border = '0';
    this.eInput.type = "time";

  }

  // gets called once when grid ready to insert the element
  getGui() {
    return this.eInput;
  }

  // focus and select can be done after the gui is attached
  afterGuiAttached() {
    this.eInput.focus();
    this.eInput.select();
  }

  // returns the new value after editing
  getValue() {
    return this.eInput.value;
  }

  // any cleanup we need to be done here
  destroy() {
  }

  // if true, then this editor will appear in a popup
  isPopup() {
    return false;
  }
  }

Created one in the dashAgGridFunctions.js file and used as:


{
          ...        
          "cellEditor": {"function": "TimePicker"},
 }
2 Likes
4

Hello @kjurukova,

Glad you got it figured out. :grin:

And thanks for posting your solution.

2 Likes