Date picker

Overview

This guide shows how to create a custom date picker cell using Angular components with the native HTML5 date input. You’ll learn how to build custom editor and renderer components that extend Handsontable’s Angular wrapper classes, providing a clean, type-safe implementation.

Difficulty: Intermediate Time: ~15 minutes Libraries: date-fns

What You’ll Build

A cell that:

Displays formatted dates (e.g., “12/31/2024” or “31/12/2024”)
Opens a native HTML5 date picker when edited
Supports per-column configuration (EU vs US date formats)
Uses Angular component architecture with proper lifecycle management
Leverages Angular’s change detection and two-way data binding
Auto-saves when a date is selected

Prerequisites

1
npm install date-fns

Ensure you have @handsontable/angular-wrapper installed in your Angular project.

Import Dependencies
```
1
import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject, ViewChild, ElementRef } from "@angular/core";
2
import {
3
  GridSettings,
4
  HotCellEditorAdvancedComponent,
5
  HotCellRendererAdvancedComponent,
6
} from "@handsontable/angular-wrapper";
7
import { format, parse, isValid } from "date-fns";
```
Key imports explained:
- Angular Core: Component decorators, change detection, dependency injection
- Handsontable Wrapper: Base classes for custom editor and renderer components
- date-fns: Lightweight date formatting and parsing
  - format: Convert Date to formatted string
  - parse: Parse string to Date object
  - isValid: Validate Date objects
Define Date Formats
```
1
const DATE_FORMAT_US = "MM/dd/yyyy";
2
const DATE_FORMAT_EU = "dd/MM/yyyy";
```
Why constants?
- Reusability across renderer and column configuration
- Single source of truth
- Easy to add more formats (ISO, custom, etc.)

Create the Renderer Component

The renderer displays the date in a human-readable format using an Angular component.

1
@Component({
2
  selector: "date-renderer",
3
  changeDetection: ChangeDetectionStrategy.OnPush,
4
  template: ` <div>{{ formattedDate }}</div>`,
5
  standalone: false,
6
})
7
export class DateRendererComponent extends HotCellRendererAdvancedComponent<string, { renderFormat: string }> {
8
  get formattedDate(): string {
9
    return format(new Date(this.value), this.getProps().renderFormat);
10
  }
11
}

What’s happening:

Extends HotCellRendererAdvancedComponent: Generic types specify:
- TValue = string: The cell value type (date as string)
- TProps = { renderFormat: string }: Custom renderer properties
@Input() value: Automatically provided by Handsontable (inherited from base class)
getProps(): Returns rendererProps from column configuration
OnPush strategy: Optimizes change detection for better performance

Key benefits:

Type-safe access to custom properties via getProps()
Automatic change detection when value changes
Clean Angular template syntax
One component definition, multiple configurations per column

Adding error handling:

1
get formattedDate(): string {
2
  if (!this.value) return '';
3

4
  try {
5
    const date = new Date(this.value);
6
    return isValid(date)
7
      ? format(date, this.getProps().renderFormat || 'MM/dd/yyyy')
8
      : 'Invalid date';
9
  } catch (e) {
10
    return 'Invalid date';
11
  }
12
}

Create the Editor Component (Part 1 - Setup)

The editor component handles user input with a native HTML5 date picker.

1
@Component({
2
  selector: "date-editor",
3
  changeDetection: ChangeDetectionStrategy.OnPush,
4
  template: `
5
    <input
6
      type="date"
7
      [(ngModel)]="dateValue"
8
      #editorInput
9
      (change)="onDateChange()"
10
      style="width: 100%; height: 100%; padding: 8px; border: 2px solid #4CAF50; border-radius: 4px; font-size: 14px; box-sizing: border-box;"
11
    />
12
  `,
13
  standalone: false,
14
})
15
export class DateEditorComponent extends HotCellEditorAdvancedComponent<string> {
16
  dateValue: string = "";
17

18
  @ViewChild("editorInput", { static: true })
19
  protected editorInput!: ElementRef<HTMLInputElement>;
20

21
  private readonly cdr = inject(ChangeDetectorRef);
22

23
  // Lifecycle methods continue in next step...
24
}

What’s happening:

Extends HotCellEditorAdvancedComponent<string>: Base class provides:
- @Input() originalValue: Cell’s current value
- @Input() row, column, prop: Cell position
- @Input() cellProperties: Column configuration
- @Output() finishEdit: Emit to save changes
- @Output() cancelEdit: Emit to discard changes
- getValue() / setValue(): Value management
Template: Native HTML5 <input type="date"> with:
- [(ngModel)]: Two-way binding to dateValue
- #editorInput: Template reference for DOM access
- (change): Triggers when user selects a date
@ViewChild: Direct access to input element for focus management
ChangeDetectorRef: Manual change detection control
OnPush strategy: Optimized rendering

Editor - Lifecycle Hook afterOpen

Called immediately after the editor opens.
```
1
override afterOpen(): void {
2
  setTimeout(() => {
3
    this.editorInput.nativeElement.showPicker?.();
4
  }, 0);
5
}
```
What’s happening:
- showPicker() is a native HTML5 API that opens the date picker calendar
- setTimeout ensures the DOM is fully rendered before opening picker
- ?. optional chaining handles browsers that don’t support showPicker()
- Provides smooth UX - calendar appears automatically

Editor - Lifecycle Hook `beforeOpen`

Called before the editor opens to initialize the value.

1
override beforeOpen(_: any, { originalValue }: any) {
2
  if (originalValue) {
3
    try {
4
      let parsedDate: Date;
5

6
      // Try to parse MM/DD/YYYY format
7
      if (typeof originalValue === "string" && originalValue.includes("/")) {
8
        parsedDate = parse(originalValue, "MM/dd/yyyy", new Date());
9
      }
10
      // Try to parse YYYY-MM-DD format
11
      else if (typeof originalValue === "string" && originalValue.includes("-")) {
12
        parsedDate = parse(originalValue, "yyyy-MM-dd", new Date());
13
      }
14
      // Fallback to generic date parsing
15
      else {
16
        parsedDate = new Date(originalValue);
17
      }
18

19
      if (isValid(parsedDate)) {
20
        // Format as YYYY-MM-DD for native input type="date"
21
        this.dateValue = format(parsedDate, "yyyy-MM-dd");
22
      } else {
23
        this.dateValue = "";
24
      }
25
    } catch (error) {
26
      console.error("Error parsing date:", error);
27
      this.dateValue = "";
28
    }
29
  } else {
30
    this.dateValue = "";
31
  }
32

33
  this.cdr.detectChanges();
34
}

What’s happening:

Receives originalValue from the cell (stored format: MM/dd/yyyy)
Parses the value using parse() from date-fns
Handles multiple date formats (MM/DD/YYYY, YYYY-MM-DD)
Converts to YYYY-MM-DD format required by <input type="date">
Validates with isValid() before setting
Triggers change detection to update the view

Why multiple format support?

Cell stores dates in MM/dd/yyyy format
Native input requires YYYY-MM-DD format
Ensures compatibility with different data sources

Editor - Date Change Handler

Called when user selects a date in the picker.

1
onDateChange(): void {
2
  if (this.dateValue) {
3
    try {
4
      // Parse YYYY-MM-DD from input
5
      const parsedDate = parse(this.dateValue, "yyyy-MM-dd", new Date());
6

7
      if (isValid(parsedDate)) {
8
        // Format as MM/DD/YYYY for Handsontable
9
        const formattedDate = format(parsedDate, "MM/dd/yyyy");
10
        this.setValue(formattedDate);
11
      }
12
    } catch (error) {
13
      console.error("Error formatting date:", error);
14
    }
15
  }
16
}

What’s happening:

Triggered by (change) event in template
Parses native input value (YYYY-MM-DD)
Converts to storage format (MM/dd/yyyy)
Calls setValue() to update editor’s internal value
Value will be saved when editor closes

Format conversion flow:

User sees: “12/31/2024” (renderer displays)
Editor opens: “2024-12-31” (native input requires)
User selects: Native picker updates dateValue
onDateChange: Converts back to “12/31/2024”
Saved to cell: “12/31/2024”

Configure Grid with Multiple Date Formats

1
const DATE_FORMAT_US = "MM/dd/yyyy";
2
const DATE_FORMAT_EU = "dd/MM/yyyy";
3

4
@Component({
5
  selector: "app-date-picker-example",
6
  standalone: false,
7
  template: ` <div>
8
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
9
  </div>`,
10
})
11
export class DatePickerExampleComponent {
12
  readonly data = [
13
    { id: 640329, itemName: "Lunar Core", restockDate: "2025-08-01" },
14
    { id: 863104, itemName: "Zero Thrusters", restockDate: "2025-09-15" },
15
    { id: 395603, itemName: "EVA Suits", restockDate: "2025-10-05" },
16
  ];
17

18
  readonly gridSettings: GridSettings = {
19
    autoRowSize: true,
20
    rowHeaders: true,
21
    autoWrapRow: true,
22
    height: "auto",
23
    manualColumnResize: true,
24
    manualRowResize: true,
25
    colHeaders: ["ID", "Item Name", "Restock Date EU", "Restock Date US"],
26
    columns: [
27
      { data: "id", type: "numeric" },
28
      { data: "itemName", type: "text" },
29
      // European format column
30
      {
31
        data: "restockDate",
32
        width: 150,
33
        allowInvalid: false,
34
        rendererProps: {
35
          renderFormat: DATE_FORMAT_EU,
36
        },
37
        editor: DateEditorComponent,
38
        renderer: DateRendererComponent,
39
      },
40
      // US format column
41
      {
42
        data: "restockDate",
43
        width: 150,
44
        allowInvalid: false,
45
        rendererProps: {
46
          renderFormat: DATE_FORMAT_US,
47
        },
48
        editor: DateEditorComponent,
49
        renderer: DateRendererComponent,
50
      },
51
    ],
52
  };
53
}

Key configuration points:

editor: DateEditorComponent: Reference to your editor component class
renderer: DateRendererComponent: Reference to your renderer component class
rendererProps: Custom properties passed to getProps() in renderer
- Type-safe access via generic parameter
- Different format per column
Same data source: Both columns display restockDate
Different presentation: EU (dd/MM/yyyy) vs US (MM/dd/yyyy)

Amazing feature:

One data column (restockDate)
Two visual representations
Same editor and renderer components
Configuration-driven behavior

Module Configuration

1
import { NgModule, ApplicationConfig } from "@angular/core";
2
import { BrowserModule } from "@angular/platform-browser";
3
import { registerAllModules } from "handsontable/registry";
4
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from "@handsontable/angular-wrapper";
5
import { CommonModule } from "@angular/common";
6
import { NON_COMMERCIAL_LICENSE } from "@handsontable/angular-wrapper";
7
import { FormsModule } from "@angular/forms";
8
import { DatePickerExampleComponent, DateEditorComponent, DateRendererComponent } from "./app.component";
9

10
// Register Handsontable's modules
11
registerAllModules();
12

13
export const appConfig: ApplicationConfig = {
14
  providers: [
15
    {
16
      provide: HOT_GLOBAL_CONFIG,
17
      useValue: {
18
        license: NON_COMMERCIAL_LICENSE,
19
      } as HotGlobalConfig,
20
    },
21
  ],
22
};
23

24
@NgModule({
25
  imports: [BrowserModule, HotTableModule, CommonModule, FormsModule],
26
  declarations: [DatePickerExampleComponent, DateEditorComponent, DateRendererComponent],
27
  providers: [...appConfig.providers],
28
  bootstrap: [DatePickerExampleComponent],
29
})
30
export class AppModule {}

Important notes:

FormsModule: Required for [(ngModel)] in editor template
Component declarations: Both DateEditorComponent and DateRendererComponent must be declared in the NgModule declarations array
registerAllModules(): Registers all Handsontable features
HOT_GLOBAL_CONFIG: Global configuration for all tables in the app

Advanced Enhancements

Time Picker Support

Add time selection with datetime-local input:

1
// In DateEditorComponent template
2
<input
3
  type="datetime-local"
4
  [(ngModel)]="dateValue"
5
  #editorInput
6
  (change)="onDateChange()"
7
/>
8

9
// Update parsing in beforeOpen
10
if (isValid(parsedDate)) {
11
  this.dateValue = format(parsedDate, "yyyy-MM-dd'T'HH:mm");
12
}
13

14
// Update rendering format
15
renderFormat: 'dd/MM/yyyy HH:mm'

Date Validation with Min/Max

Add native HTML5 validation:

1
// In DateEditorComponent template
2
<input
3
  type="date"
4
  [(ngModel)]="dateValue"
5
  [min]="minDate"
6
  [max]="maxDate"
7
  #editorInput
8
/>
9

10
// In component class
11
@Input() minDate: string = '2024-01-01';
12
@Input() maxDate: string = '2024-12-31';
13

14
// Pass via cellProperties in column config
15
columns: [
16
  {
17
    data: 'restockDate',
18
    editor: DateEditorComponent,
19
    minDate: '2024-01-01',
20
    maxDate: '2024-12-31',
21
  }
22
]

Custom Styling with Angular

Use component styles:

1
@Component({
2
  selector: "date-editor",
3
  template: `<input type="date" [(ngModel)]="dateValue" #editorInput class="date-input" />`,
4
  styles: [`
5
    .date-input {
6
      width: 100%;
7
      height: 100%;
8
      padding: 8px;
9
      border: 2px solid #4CAF50;
10
      border-radius: 4px;
11
      font-size: 14px;
12
      box-sizing: border-box;
13
    }
14

15
    .date-input:focus {
16
      outline: none;
17
      border-color: #45a049;
18
      box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
19
    }
20
  `],
21
  standalone: false,
22
})

Error Handling with Visual Feedback

Add validation messages:

1
@Component({
2
  template: `
3
    <div class="editor-container">
4
      <input type="date" [(ngModel)]="dateValue" #editorInput (change)="onDateChange()" />
5
      @if (hasError) {
6
      <span class="error-message">Invalid date format</span>
7
      }
8
    </div>
9
  `,
10
})
11
export class DateEditorComponent extends HotCellEditorAdvancedComponent<string> {
12
  hasError = false;
13

14
  onDateChange(): void {
15
    try {
16
      const parsedDate = parse(this.dateValue, "yyyy-MM-dd", new Date());
17
      this.hasError = !isValid(parsedDate);
18

19
      if (!this.hasError) {
20
        const formattedDate = format(parsedDate, "MM/dd/yyyy");
21
        this.setValue(formattedDate);
22
      }
23
    } catch (error) {
24
      this.hasError = true;
25
    }
26
  }
27
}

Reactive Forms Integration

Use Angular’s reactive forms:

1
import { FormControl, ReactiveFormsModule } from "@angular/forms";
2

3
@Component({
4
  template: `<input type="date" [formControl]="dateControl" #editorInput />`,
5
  standalone: false,
6
})
7
// Note: Import ReactiveFormsModule in your NgModule
8
export class DateEditorComponent extends HotCellEditorAdvancedComponent<string> {
9
  dateControl = new FormControl("");
10

11
  override beforeOpen(_: any, { originalValue }: any) {
12
    if (originalValue) {
13
      const parsedDate = parse(originalValue, "MM/dd/yyyy", new Date());
14
      if (isValid(parsedDate)) {
15
        this.dateControl.setValue(format(parsedDate, "yyyy-MM-dd"));
16
      }
17
    }
18

19
    this.dateControl.valueChanges.subscribe((value) => {
20
      if (value) {
21
        const parsedDate = parse(value, "yyyy-MM-dd", new Date());
22
        if (isValid(parsedDate)) {
23
          this.setValue(format(parsedDate, "MM/dd/yyyy"));
24
        }
25
      }
26
    });
27
  }
28
}

Internationalization (i18n)

Use Angular’s built-in i18n:

1
import { DatePipe } from "@angular/common";
2

3
@Component({
4
  selector: "date-renderer",
5
  template: `<div>{{ value | date : getProps().renderFormat }}</div>`,
6
  standalone: false,
7
})
8
export class DateRendererComponent extends HotCellRendererAdvancedComponent<string, { renderFormat: string }> {}
9
// Note: DatePipe is available through CommonModule imported in your NgModule

Congratulations! You’ve created a production-ready date picker with full localization support and advanced configuration.

Date picker

Overview

What You’ll Build

Prerequisites

Import Dependencies

Define Date Formats

Create the Renderer Component

Create the Editor Component (Part 1 - Setup)

Editor - Lifecycle Hook afterOpen

Editor - Lifecycle Hook beforeOpen

Editor - Date Change Handler

Configure Grid with Multiple Date Formats

Module Configuration

Advanced Enhancements

Time Picker Support

Date Validation with Min/Max

Custom Styling with Angular

Error Handling with Visual Feedback

Reactive Forms Integration

Internationalization (i18n)

Editor - Lifecycle Hook `afterOpen`

Editor - Lifecycle Hook `beforeOpen`