---
title: Date Picker
product: Form Library
description: Learn how to integrate a third-party date picker as a custom SurveyJS question type in React, Angular, and Vue applications.
framework: Angular
source: https://surveyjs.io/form-library/examples/form-with-datepicker/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Date Picker (Angular)

A date picker allows respondents to select a date using a calendar popup or by entering a value manually in an input field. This example demonstrates how to integrate a third-party date picker as a custom SurveyJS question type. Each platform uses a different MIT-licensed date picker component: <a href="https://github.com/Hacker0x01/react-datepicker#react-date-picker" target="_blank">React Date Picker</a>, <a href="https://material.angular.io/components/datepicker" target="_blank">Angular Material Datepicker</a>, or <a href="https://vue3datepicker.com/" target="_blank">Vue Datepicker</a>.

Despite using different libraries, all three implementations share the same question model and behavior, so a single survey JSON definition works across platforms without modification. The integration approach follows the common pattern described in the Form Library tutorials linked at the end of this page.

This demo defines a custom question type that:

- Renders a third-party date picker inside a SurveyJS form
- Supports configuration of display format, placeholder, minimum/maximum selectable dates, and clearing behavior
- Stores the selected value as a normalized `yyyy-MM-dd` string in survey results (for example, `2026-06-08`)

## Survey JSON

```js
{
  "elements": [
    {
      "type": "third-party-datepicker",
      "name": "deliveryDate",
      "title": "Preferred delivery date",
      "isRequired": true,
      "dateFormat": "MM/dd/yyyy",
      "placeholder": "Select a date",
      "allowClear": true,
      "minDate": "2026-06-01",
      "maxDate": "2026-12-31"
    }
  ]
}
```

After completion, the resulting data contains:

```js
{
  "deliveryDate": "2026-06-08"
}
```

The display format (`MM/dd/yyyy` &rarr; `06/08/2026`) affects only how the value is shown in the UI; it does not affect the stored data format.

## Custom Question Properties

The date picker extends the standard [`Question`](/form-library/documentation/api-reference/question) class with the following properties:

| Property | Type | Default | Description |
| -------- | ---- | ------- | ----------- |
| `dateFormat` | `string` | `"MM/dd/yyyy"` | Controls how the date is displayed in the input using <a href="https://date-fns.org/docs/format" target="_blank">date-fns tokens</a>. Not applicable in Angular (see note below). |
| `placeholder` | `string` | `""` | Placeholder text shown when no date is selected. |
| `allowClear` | `boolean` | `true` | Enables clearing the selected date. When disabled, the value can only be changed via the calendar UI. |
| `minDate` | `string` | `""` | Minimum selectable date in `yyyy-MM-dd` format. Empty means no lower bound. |
| `maxDate` | `string` | `""` | Maximum selectable date in `yyyy-MM-dd` format. Empty means no upper bound. |

> Angular Material does not support per-control format strings. Date display is configured globally via the <a href="https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats" target="_blank">MAT_DATE_FORMATS</a> injection token. The Angular demo uses a global format matching `MM/dd/yyyy` (e.g., `06/08/2026`) and ignores the `dateFormat` property. To change formatting, update the `DATEPICKER_DATE_FORMATS` constant in the Angular implementation.

## Integration Tutorials

For step-by-step instructions on integrating third-party components (model definition, serialization, rendering, and registration), see:

- [Integrate Third-Party React Components](https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-react)
- [Integrate Third-Party Angular Components](https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-angular)
- [Integrate Third-Party Vue 3 Components](/form-library/documentation/customize-question-types/third-party-component-integration-vue)

## Files

### `src/app/components/json.ts`

```ts
export const json = {
  "elements": [
    {
      "type": "third-party-datepicker",
      "name": "deliveryDate",
      "title": "Preferred delivery date",
      "isRequired": true,
      "dateFormat": "MM/dd/yyyy",
      "placeholder": "Select a date",
      "allowClear": true,
      "minDate": "2026-06-01",
      "maxDate": "2026-12-31"
    }
  ]
}
;
```

### `src/app/components/survey.component.css`

```css
.sd-text__content.sd-datepicker {
  width: 100%;
}

.sd-text__content.sd-datepicker .sd-datepicker__input {
  width: 100%;
}
```

### `src/app/components/survey.component.html`

```html
<survey [model]="model" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></survey>
```

### `src/app/components/datepicker.component.css`

```css
/*
  In a regular Angular CLI application, add a Material prebuilt theme to the
  "styles" array of angular.json:

    "styles": [ "@angular/material/prebuilt-themes/indigo-pink.css", ... ]

  The demo build cannot load CSS from node_modules, so the minimal subset of
  styles required by the datepicker popup is inlined below: the CDK overlay
  structural styles and the calendar colors.
*/

/* CDK a11y styles: hides screen-reader-only labels (weekday names, etc.). */
.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  left: 0;
}

/* CDK overlay structural styles (from @angular/cdk/overlay-prebuilt.css). */
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cdk-overlay-container {
  position: fixed;
  /* Show the calendar popup above SurveyJS elements. */
  z-index: 11000;
}

.cdk-overlay-container:empty {
  display: none;
}

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  display: flex;
  max-width: 100%;
  max-height: 100%;
  z-index: 1000;
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  z-index: 1000;
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;
}

.cdk-overlay-transparent-backdrop {
  transition: visibility 1ms linear, opacity 1ms linear;
  visibility: hidden;
  opacity: 1;
}

.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
  visibility: visible;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
  z-index: 1000;
}

/* Material calendar layout (structural styles from MatCalendarBody / MatCalendarHeader). */
.mat-calendar {
  display: block;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-calendar-header {
  padding: 8px 8px 0 8px;
}

.mat-calendar-content {
  padding: 0 8px 8px 8px;
  outline: none;
}

.mat-calendar-controls {
  display: flex;
  margin: 5% calc(4.7142857143% - 16px);
}

.mat-calendar-spacer {
  flex: 1 1 auto;
}

.mat-calendar-body {
  min-width: 224px;
  font-size: 13px;
}

.mat-calendar-body-label,
.mat-calendar-period-button {
  font-size: 14px;
  font-weight: 500;
}

.mat-calendar-table-header th {
  font-size: 11px;
  font-weight: 400;
}

.mat-calendar-body-cell-container {
  position: relative;
  height: 0;
  line-height: 0;
}

.mat-calendar-body-cell {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.mat-calendar-body-cell-content {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 90%;
  height: 90%;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.87);
}

/* Material calendar colors (subset of a prebuilt theme). */
.mat-datepicker-content {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 4px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.mat-calendar-arrow {
  fill: rgba(0, 0, 0, 0.54);
}

.mat-datepicker-toggle,
.mat-datepicker-content .mat-calendar-next-button,
.mat-datepicker-content .mat-calendar-previous-button {
  color: rgba(0, 0, 0, 0.54);
}

.mat-calendar-table-header,
.mat-calendar-body-label {
  color: rgba(0, 0, 0, 0.54);
}

.mat-calendar-table-header-divider::after {
  background: rgba(0, 0, 0, 0.12);
}

.mat-calendar-body-disabled
  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  color: rgba(0, 0, 0, 0.38);
}

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  background-color: rgba(0, 0, 0, 0.04);
}

.mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: rgba(0, 0, 0, 0.38);
}

/* Use the SurveyJS primary color for the selected date. */
.mat-calendar-body-selected {
  background-color: var(--sjs-primary-backcolor, #19b394);
  color: #fff;
}

/*
  Popup-only overrides. The calendar is teleported into a CDK overlay on <body>,
  and Material injects focus-indicator styles via a runtime <style> tag that
  loads after this stylesheet. Use a scoped selector and !important to win.
*/
.mat-datepicker-content .mat-calendar-body-cell-content::before {
  margin: 0 !important;
}

/* Screen-reader close button: hidden by default, shown only on keyboard focus. */
.mat-datepicker-content .mat-datepicker-close-button.cdk-visually-hidden {
  display: none !important;
}

/* Question element styles. */
third-party-datepicker {
  display: block;
  position: relative;
  z-index: 1;
}

.sd-text__content.sd-datepicker {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.sd-text__content.sd-datepicker .sd-datepicker__input {
  flex: 1 1 auto;
  min-width: 0;
}

.sd-datepicker__clear {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  color: rgba(0, 0, 0, 0.54);
}

.sd-datepicker__clear:hover {
  color: rgba(0, 0, 0, 0.87);
}
```

### `src/app/components/datepicker.component.html`

```html
<div
  class="sd-text__content sd-datepicker"
  [ngStyle]="wrapperStyle"
  #contentElement
  (pointerdown)="onWrapperPointerDown($event)"
>
  <input
    [matDatepicker]="picker"
    [value]="dateValue"
    (dateChange)="onDateChange($event)"
    [min]="minDateValue"
    [max]="maxDateValue"
    [class]="inputClassName()"
    [id]="model.inputId"
    [placeholder]="model.placeholder"
    [disabled]="model.isInputReadOnly"
    [readonly]="!model.allowClear"
  />
  <button
    *ngIf="showClearButton"
    type="button"
    class="sd-datepicker__clear"
    aria-label="Clear date"
    (click)="clearValue()"
  >
    &#10005;
  </button>
  <mat-datepicker-toggle
    [for]="picker"
    [disabled]="model.isInputReadOnly"
  ></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</div>
```

### `src/app/components/datepicker.component.ts`

```ts
import {
  ChangeDetectorRef,
  Component,
  NgZone,
  OnDestroy,
  ViewChild,
  ViewContainerRef,
  ViewEncapsulation
} from "@angular/core";
import { MAT_DATE_FORMATS } from "@angular/material/core";
import { MatDatepicker, MatDatepickerInputEvent } from "@angular/material/datepicker";
import { Subscription } from "rxjs";
import { AngularComponentFactory, QuestionAngular } from "survey-angular-ui";
import { ElementFactory, Question, Serializer } from "survey-core";

/**
 * Angular Material Datepicker (MIT): https://material.angular.io/components/datepicker
 * Stored value: `yyyy-MM-dd` (calendar-local), same as the React and Vue demos.
 *
 * Unlike react-datepicker and Vue Datepicker, Angular Material does not accept
 * a per-question format string. The display format is configured through the
 * `MAT_DATE_FORMATS` token (see the component providers below), so the
 * `dateFormat` question property is not used on this platform.
 */
export const DATEPICKER_TYPE = "third-party-datepicker";

/** Renders dates as `06/08/2026` (en-US) to match the other platform demos. */
export const DATEPICKER_DATE_FORMATS = {
  parse: {
    dateInput: null
  },
  display: {
    dateInput: { year: "numeric", month: "2-digit", day: "2-digit" },
    monthYearLabel: { year: "numeric", month: "short" },
    dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
    monthYearA11yLabel: { year: "numeric", month: "long" }
  }
};

function toISODateString(d: Date): string {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${y}-${m}-${day}`;
}

function parseISODate(s: unknown): Date | null {
  if (s == null || s === "") return null;
  if (s instanceof Date && !isNaN(s.getTime())) return s;
  if (typeof s !== "string") return null;
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
  if (!m) return null;
  const dt = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
  return isNaN(dt.getTime()) ? null : dt;
}

export class QuestionDatepickerModel extends Question {
  getType(): string {
    return DATEPICKER_TYPE;
  }

  get dateFormat(): string {
    return this.getPropertyValue("dateFormat") || "MM/dd/yyyy";
  }
  set dateFormat(val: string) {
    this.setPropertyValue("dateFormat", val);
  }

  get placeholder(): string {
    return this.getPropertyValue("placeholder") ?? "";
  }
  set placeholder(val: string) {
    this.setPropertyValue("placeholder", val);
  }

  get allowClear(): boolean {
    return this.getPropertyValue("allowClear") !== false;
  }
  set allowClear(val: boolean) {
    this.setPropertyValue("allowClear", val);
  }

  get minDate(): string {
    return this.getPropertyValue("minDate") ?? "";
  }
  set minDate(val: string) {
    this.setPropertyValue("minDate", val);
  }

  get maxDate(): string {
    return this.getPropertyValue("maxDate") ?? "";
  }
  set maxDate(val: string) {
    this.setPropertyValue("maxDate", val);
  }

  onWrapperPointerDown(event: PointerEvent): void {
    event.stopPropagation();
  }
}

ElementFactory.Instance.registerElement(
  DATEPICKER_TYPE,
  (name) => new QuestionDatepickerModel(name)
);

Serializer.addClass(
  DATEPICKER_TYPE,
  [
    {
      name: "dateFormat",
      type: "string",
      default: "MM/dd/yyyy",
      category: "general",
      visibleIndex: 2
    },
    {
      name: "placeholder",
      type: "string",
      default: "",
      category: "general",
      visibleIndex: 3
    },
    {
      name: "allowClear",
      type: "boolean",
      default: true,
      category: "general",
      visibleIndex: 4
    },
    {
      name: "minDate",
      type: "string",
      default: "",
      category: "general",
      visibleIndex: 5
    },
    {
      name: "maxDate",
      type: "string",
      default: "",
      category: "general",
      visibleIndex: 6
    }
  ],
  () => new QuestionDatepickerModel(""),
  "question"
);

@Component({
  selector: "third-party-datepicker",
  templateUrl: "./datepicker.component.html",
  styleUrls: ["./datepicker.component.css"],
  encapsulation: ViewEncapsulation.None,
  providers: [{ provide: MAT_DATE_FORMATS, useValue: DATEPICKER_DATE_FORMATS }]
})
export class DatepickerComponent
  extends QuestionAngular<QuestionDatepickerModel>
  implements OnDestroy
{
  @ViewChild("picker") picker?: MatDatepicker<Date>;

  private onMicrotaskEmptySubscription?: Subscription;

  constructor(
    changeDetectorRef: ChangeDetectorRef,
    viewContainerRef: ViewContainerRef,
    private ngZone: NgZone
  ) {
    super(changeDetectorRef, viewContainerRef);
  }

  ngAfterViewInit(): void {
    super.ngAfterViewInit();
    // survey-angular-ui detaches the survey from Angular's automatic change
    // detection and re-renders it only when SurveyJS model properties change.
    // The calendar popup is rendered into this (detached) view tree, so while
    // it is open we have to run change detection manually on every VM turn.
    // Otherwise the calendar stays empty and does not react to clicks.
    this.onMicrotaskEmptySubscription = this.ngZone.onMicrotaskEmpty.subscribe(() => {
      if (this.picker?.opened) {
        this.detectChanges();
      }
    });
  }

  ngOnDestroy(): void {
    this.onMicrotaskEmptySubscription?.unsubscribe();
    this.picker?.close();
  }

  get dateValue(): Date | null {
    return parseISODate(this.model.value);
  }

  get minDateValue(): Date | null {
    return parseISODate(this.model.minDate);
  }

  get maxDateValue(): Date | null {
    return parseISODate(this.model.maxDate);
  }

  get showClearButton(): boolean {
    return this.model.allowClear && !this.model.isEmpty() && !this.model.isInputReadOnly;
  }

  get wrapperStyle(): { [key: string]: string } | null {
    return this.model.isInputReadOnly || this.model.isDesignMode
      ? { pointerEvents: "none", opacity: "0.85" }
      : null;
  }

  inputClassName(): string {
    const parts = ["sd-input", "sd-datepicker__input"];
    if (this.model.isInputReadOnly) {
      parts.push("sd-input--readonly", "sd-input--disabled");
    }
    if (this.model.currentErrorCount > 0) {
      parts.push("sd-input--error");
    }
    return parts.join(" ");
  }

  onDateChange(event: MatDatepickerInputEvent<Date>): void {
    this.model.value = event.value ? toISODateString(event.value) : null;
  }

  clearValue(): void {
    this.model.value = null;
  }

  onWrapperPointerDown(event: PointerEvent): void {
    this.model.onWrapperPointerDown(event);
  }
}

AngularComponentFactory.Instance.registerComponent(
  DATEPICKER_TYPE + "-question",
  DatepickerComponent
);
```

### `src/app/components/survey.component.ts`

```ts
import { Component, OnInit } from "@angular/core";
import { Model } from "survey-core";
import { json } from "./json";
import "./survey.component.css";
import "survey-core/survey-core.min.css";
import { DatepickerComponent } from "./datepicker.component";


@Component({
    // tslint:disable-next-line:component-selector
    selector: "component-survey",
    templateUrl: "./survey.component.html",
    styleUrls: ["./survey.component.css"]
})
export class SurveyComponent implements OnInit {
    static declaration = [DatepickerComponent];
    model: Model;
    ngOnInit() {
        const survey = new Model(json);
        survey.onComplete.add((sender, options) => {
            console.log(JSON.stringify(sender.data, null, 3));
        });
        this.model = survey;
    }
}
```

### `src/app/app.component.css`

```css

```

### `src/app/app.component.html`

```html
<component-survey></component-survey>
```

### `src/app/app.component.ts`

```ts
import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "CodeSandbox";
}
```

### `src/app/app.module.ts`

```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { SurveyModule } from "survey-angular-ui";
import { SurveyComponent } from "./components/survey.component";
// NoopAnimationsModule makes the calendar popup open and close instantaneously,
// which avoids stuck overlays in embedded environments. Replace it with
// BrowserAnimationsModule if you want Material's open/close animations.
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
import { MatNativeDateModule } from "@angular/material/core";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { DatepickerComponent } from "./components/datepicker.component";


@NgModule({
    declarations: [AppComponent, SurveyComponent, DatepickerComponent],
    imports: [BrowserModule, SurveyModule, NoopAnimationsModule, MatDatepickerModule, MatNativeDateModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
```

### `src/environments/environment.prod.ts`

```ts
export const environment = {
    production: true
};
```

### `src/environments/environment.ts`

```ts
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.

export const environment = {
    production: false
};
```

### `src/index.html`

```html
<app-root></app-root>
```

### `src/main.ts`

```ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
```

### `src/polyfills.ts`

```ts
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import "core-js/proposals/reflect-metadata";

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import "zone.js/dist/zone"; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
```

### `src/styles.css`

```css
.sd-text__content.sd-datepicker {
  width: 100%;
}

.sd-text__content.sd-datepicker .sd-datepicker__input {
  width: 100%;
}
```

### `src/typings.d.ts`

```ts
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
    id: string;
}
```

### `.angular-cli.json`

```json
{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [ "assets", "favicon.ico" ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "prefix": "app",
      "styles": [ "styles.css",
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
       ],
      "scripts": [ ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}
```

### `_tsconfig.json`

```json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
```

### `package.json`

```json
{
  "name": "surveyjs-angular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.1.1",
    "@angular/cdk": "14.1.1",
    "@angular/common": "14.1.1",
    "@angular/compiler": "14.1.1",
    "@angular/core": "14.1.1",
    "@angular/forms": "14.1.1",
    "@angular/platform-browser": "14.1.1",
    "@angular/platform-browser-dynamic": "14.1.1",
    "@angular/router": "14.1.1",
    "core-js": "3.6.4",
    "rxjs": "6.5.4",
    "@angular/material": "14.1.1",
    
    "survey-core": "latest",
    "survey-angular-ui": "latest",
    "tslib": "1.13.0",
    "zone.js": "0.11.7"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/core-js": "0.9.46",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "3.9.7"
  },
  "keywords": [ "angular", "surveyjs" ],
  "description": "SurveyJS-Angular example project"
}
```

## Other Frameworks

- [React](https://surveyjs.io/form-library/examples/form-with-datepicker/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/form-with-datepicker/vue3js.md)