Hey 
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.

Any idea how I can fix this, or use another way to validate time input into AG Grid?
Thanks!
Found another solution 
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"},
}
Found another solution 
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
Hello @kjurukova,
Glad you got it figured out. 
And thanks for posting your solution.
2 Likes