[英]Custom datepicker on cell edit with ag-grid
我正在嘗試在單元格編輯中實現日期選擇器。 我試過下面的例子
https://www.ag-grid.com/javascript-grid-cell-editing/#example-datepicker-cell-editing
這個例子使用了 jquery-ui datepicker
function getDatePicker() {
function Datepicker() {}
Datepicker.prototype.init = function(params) {
this.eInput = document.createElement("input");
this.eInput.value = params.value;
$(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
};
Datepicker.prototype.getGui = function() {
return this.eInput;
};
Datepicker.prototype.afterGuiAttached = function() {
this.eInput.focus();
this.eInput.select();
};
Datepicker.prototype.getValue = function() {
return this.eInput.value;
};
Datepicker.prototype.destroy = function() {};
Datepicker.prototype.isPopup = function() {
return false;
};
return Datepicker;
}
這條線
$(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
用於添加jquery-ui datepicker
我怎樣才能擁有一個我想要包含的自定義 DatePicker 反應組件而不是 jquery-ui datepicker?
您需要實現interface ICellEditorComp {...}
關於自定義編輯器的文檔在這里https://www.ag-grid.com/javascript-grid-cell-editor/
來自https://www.ag-grid.com/javascript-grid-cell-editing/#example-datepicker-cell-editing的示例代碼以支持Jquery UI Datepicker的方式編寫在 React 項目中。
我有一個建議的解決方案,我已經嘗試使用TextField Material UI和Material UI Native DatePicker 。 請檢查下面的代碼,它對我來說效果很好。
const getDatePicker = () => {
function Datepicker() {}
Datepicker.prototype.init = function(params) {
const fillZeros = (a) => {
return (Number(a) < 10) ? '0' + a : a;
}
const getFormatedDate = (dateString ) => {
const dateParse = new Date(dateString.split('/')[1]+'-' + dateString.split('/')[0]+'-'+dateString.split('/')[2]);
const dd = dateParse.getDate();
const mm = dateParse.getMonth() + 1; //January is 0!
const yyyy = dateParse.getFullYear();
console.log(dateString, yyyy + '-' + fillZeros(mm) + '-' + fillZeros(dd));
return yyyy + '-' + fillZeros(mm) + '-' + fillZeros(dd);
}
this.textInput = React.createRef();
const eInput = React.createElement(TextField, {
type: "date",
defaultValue: getFormatedDate(params.value),
ref: this.textInput
});
this.div = document.createElement('div');
this.div.className = "ag-cell-parent-append";
ReactDOM.render(eInput, this.div);
};
Datepicker.prototype.getGui = function() {
return this.div;
};
Datepicker.prototype.afterGuiAttached = function() {
this.textInput.current.focus();
};
Datepicker.prototype.getValue = function() {
return this.textInput.current.querySelector('input').value;
};
Datepicker.prototype.destroy = function() {};
Datepicker.prototype.isPopup = function() {
return false;
};
return Datepicker;
}
完整的工作示例在stackblitz中
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.