JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://crm.personcentredsoftware.com/ERP/Scripts/jquery-2.2.0.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.bootstrap.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/cultures/kendo.culture.en-GB.min.js"></script>
<div id="spreadsheetContainer">
  <div id="spreadsheet" style="width: 100%; height: 200px"></div>
</div>

JavaScript

kendo.culture("en-GB");
var sheet, dataSource;
var maxRows = 5;
var mode = "Service Users";

sheet = $("#spreadsheet").kendoSpreadsheet({
toolbar: false,
sheetsbar: false,
columns: 1,
rows: maxRows + 1,
sheets: [{
  name: mode,
  dataSource: _createDatasource(),
  rows: setupDefaultRows(mode),
  columns: [{
    width: 80
  }]
}]
}).data("kendoSpreadsheet");

function setupDefaultRows(mode) {
  var d = new Date(),
    rows = [];
  var today = d.getDate().toString() + "/" + (d.getMonth() + 1).toString() + "/" + d.getFullYear().toString();
  console.log(today);

  rows = [{
    height: 25,
    index: 0,
    cells: [{
      value: "DateOfBirth",
      bold: true,
      enable: false
    }]
  }, ];


  for (var i = 1; i < maxRows; i++) {
    rows.push({
      index: i,
      cells: [{
        format: "dd/mm/yyyy", // DateOfBirth
        validation: {
            dataType: "date",
            comparerType: "between",
            from: "DATEVALUE(\"01/01/1900\")",
            to: "DATEVALUE(\"" + today + "\")",
            allowNulls: false,
            type: "warning",
            titleTemplate: "Date of Birth validation error",
            messageTemplate: "Date of Birth must be valid"
        }
      }]
    });
  }

  return rows;
}

function _generateData() {
  rows = [];
  for (var i = 1; i < maxRows; i++) {

    rows.push({
      DateOfBirth: null
    });
  }
  return rows;
}

function _createDatasource() {

  dataSource = new kendo.data.DataSource({
    data: _generateData(),
    change: function(e) {
      if (e.field == "DateOfBirth" || e.field == "Admission") {
        if (e.items[0][e.field] == null)
          return;

        console.log("DS has changed", e.field, e.items[0][e.field]);
      }
    },
    schema: {
      model: {
        fields: {
          DateOfBirth: {
            type:"number"
          }
        }
      }
    }
  });
  return dataSource;
}