Handsontable - Date picker clipped

by Blake Gilchrist

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

Babel + JSX

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['Mercedes', 'A 160', 6999.95, '01/14/2021'],
        ['Citroen', 'C4 Coupe', 8330, '12/01/2022'],
        ['Audi', 'A4 Avant', 33900, '11/19/2023'],
        ['Opel', 'Astra', 7000, '02/02/2021'],
        ['BMW', '320i Coupe', 30500, '07/24/2022']
      ]}
      colHeaders={['Car', 'Model', 'Price', 'Registration date']}
      height="auto"
      columns={[{
          type: 'text',
        },
        {
          // 2nd cell is simple text, no special options here
        },
        {
          type: 'numeric',
          numericFormat: {
            pattern: '$ 0,0.00'
          }
        },
        {
          type: 'date',
          dateFormat: 'MM/DD/YYYY',
          correctFormat: true,
          defaultDate: '01/01/1900',
          // datePicker additional options
          // (see https://github.com/dbushell/Pikaday#configuration)
          datePickerConfig: {
            // First day of the week (0: Sunday, 1: Monday, etc)
            firstDay: 0,
            showWeekNumber: true,
            licenseKey: 'non-commercial-and-evaluation',
            disableDayFn(date) {
              // Disable Sunday and Saturday
              return date.getDay() === 0 || date.getDay() === 6;
            }
          }
        }
      ]}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));