Question

我的问题是，日期选择器样式某种程度上是错误的。它显示了一些让我感到困惑的汉字。

我已将datepicker样式导入styles.scss

@import "~ng-pick-datetime/assets/style/picker.min.css";

我将datepicker分配给columnDef中的列，并声明： components：any;

    this.columnDefs = [
          { headerName: 'Id', field: 'Id', width: 60, editable: false },
          {
            headerName: 'DateTimeCreated', 
            field: 'DateTimeCreated',
             width: 135,
             valueFormatter: this.dateFormatter,
             editable:true,
             cellEditor: "datePicker"
          }];
    this.components = { datePicker: getDatePicker() };

在.ts类之外，我添加了javascript / jquery函数

function getDatePicker() {
  function Datepicker() {}
  Datepicker.prototype.init = function(params) {
    this.eInput = document.createElement("input");
    this.eInput.value = params.value;
    (<any>$(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;
}

我的index.html具有以下脚本

  <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DataExchange SAP</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
  <script src="node_modules\jquery\dist\jquery.min.js"></script>  
  <script src="node_modules\jquery\dist\jquery.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <script src="node_modules\jquery-datepicker\jquery-datepicker.js"></script> 

  <link rel="stylesheet" href="css/datepicker.css">
  <!-- <script src="js/datepicker.js"></script> -->
</head>
<body>
  <app-root></app-root>
</body>
</html>

ag-grid：带有Datepicker的cellEditor显示不正确

0 个答案: