在单元格 HandsonTable 上应用蒙版

Question

我需要一位具有 HandsonTable 的专家，我需要知道如何将掩码放入特定列中。 我试图用 beforeRendered 来实现它，但不起作用。有什么建议吗？

Answer 1

好吧，这就是我想做的。

    var codeRenderer = function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    $(".handsontableInput").mask("99/99/9999");
    console.log(row);


};

Answer 2

也许这可以帮助：

import "./styles.css";
import Handsontable from "handsontable";
import Inputmask from "inputmask";
import "handsontable/dist/handsontable.full.min.css";

// This example creates a date editor that will show MM/YYYY
const SpecialDateEditor = Handsontable.editors.DateEditor.prototype.extend();

SpecialDateEditor.prototype.createElements = function () {
  Handsontable.editors.DateEditor.prototype.createElements.apply(
    this,
    arguments
  );

  // You need to require/import the "inputmask" library
  var im = new Inputmask("99/9999");

  // Create password input and update relevant properties
  this.TEXTAREA = document.createElement("input");
  this.TEXTAREA.setAttribute("type", "text");
  this.TEXTAREA.className = "handsontableInput";
  im.mask(this.TEXTAREA);
  this.textareaStyle = this.TEXTAREA.style;
  this.textareaStyle.width = 0;
  this.textareaStyle.height = 0;

  // Replace textarea with password input
  Handsontable.dom.empty(this.TEXTAREA_PARENT);
  this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
};

const container = document.querySelector("#example2");
const hot = new Handsontable(container, {
  data: [
    ["Tesla", 2017, "black", "black"],
    ["Nissan", 2018, "blue", "blue"],
    ["Chrysler", 2019, "yellow", "black"],
    ["Volvo", 2020, "yellow", "gray"]
  ],
  colHeaders: true,
  rowHeaders: true,
  height: "auto",
  type: "date",
  editor: SpecialDateEditor,
  licenseKey: "non-commercial-and-evaluation"
});

https://codesandbox.io/s/great-lena-cnn8bz?file=/src/index.js:0-1451