@C45513 , @imClumsyPanda @maarten-betman here is my preliminar solution:
1- copy the class DatePicker from the aggrid documentation Cell Editors, last example, look at the main.js ( JavaScript Data Grid: Cell Editors (ag-grid.com))
DatePicker = JsCode("""
class DatePicker {
// gets called once before the renderer is used
init(params) {
// create the cell
this.eInput = document.createElement('input');
this.eInput.value = params.value;
this.eInput.classList.add('ag-input');
this.eInput.style.height = '100%';
// https://jqueryui.com/datepicker/
$(this.eInput).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: () => {
this.eInput.focus();
},
});
}
// 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;
}
}
""")
2- configure your column and set the cellEditor: gb.configure_column('Date_Column', cellEditor=DatePicker, cellEditorPopup=True)
3- Edit the content of the index.html in your library (Lib\site-packages\st_aggrid\frontend\build\index.html) to reference the JQUERY API:
<!doctype html>
<html lang="en">
<head>
<title>Streamlit-AgGrid</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Streamlit AgGrid"/>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link href="./static/css/2.7fd92936.chunk.css" rel="stylesheet">
<link href="./static/css/main.a8536b63.chunk.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(e){function r(r){for(var n,f,l=r[0],i=r[1],a=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="./";var l=this.webpackJsonpfrontend=this.webpackJsonpfrontend||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var a=0;a<l.length;a++)r(l[a]);var p=i;t()}([])
</script>
<script src="./static/js/2.40163c18.chunk.js"></script>
<script src="./static/js/main.506285f1.chunk.js"></script>
</body>
</html>
4- for a Prod environment you may need to write a command in Docker to copy this file and replace the default package file
5- run your Streamlit UI and you should see the calendar in the grid:
Note: The only problem is that my calendar is not working properly. Cannot assign the value to the cell and cannot change the month. But is a step closer.
If you have any suggestion or manage to make it work, please share it with the rest of the community.
@PablocFonseca any advice to not overwrite or edit the st_aggrid files to include the JQUERY URL? … any option to do it programmatically as the functions are passed in the index.html body section?
references:
Can you publish the full code for your example, please? Thank you! Daniel
