# Date time input - Code

> import DatetimeInputPlayground from '@site/docs/autogenerated/playground/datetime-input.mdx';

import DatetimeInputPlayground from '@site/docs/autogenerated/playground/datetime-input.mdx';

# Date time input - Code

## Basic

### React Examples

#### datetime-input.tsx
```tsx
import { IxDatetimeInput } from '@siemens/ix-react';

function DatetimeInput() {
  return (
    <IxDatetimeInput
      label="Date and time"
      value="2026/02/08 00:00:00"
    ></IxDatetimeInput>
  );
}

export default DatetimeInput;
```

### Angular Examples

#### datetime-input.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './datetime-input.html',
})
export default class DatetimeInput {}
```

#### datetime-input.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00"></ix-datetime-input>
```

### Angular Standalone Examples

#### datetime-input.ts
```ts
import { Component } from '@angular/core';
import { IxDatetimeInput } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxDatetimeInput],
  templateUrl: './datetime-input.html',
})
export default class DatetimeInput {}
```

#### datetime-input.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00"></ix-datetime-input>
```

### Vue Examples

#### datetime-input.vue
```vue
<script setup lang="ts">
import { IxDatetimeInput } from '@siemens/ix-vue';
</script>

<template>
  <IxDatetimeInput label="Date and time" value="2026/02/08 00:00:00"></IxDatetimeInput>
</template>
```

## Disabled

### React Examples

#### datetime-input-disabled.tsx
```tsx
import { IxDatetimeInput } from '@siemens/ix-react';

function DatetimeInputDisabled() {
  return <IxDatetimeInput label="Date and time" value="2026/02/08 00:00:00" disabled></IxDatetimeInput>;
}

export default DatetimeInputDisabled;
```

### Angular Examples

#### datetime-input-disabled.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './datetime-input-disabled.html',
})
export default class DatetimeInputDisabled {}
```

#### datetime-input-disabled.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00" disabled></ix-datetime-input>
```

### Angular Standalone Examples

#### datetime-input-disabled.ts
```ts
import { Component } from '@angular/core';
import { IxDatetimeInput } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxDatetimeInput],
  templateUrl: './datetime-input-disabled.html',
})
export default class DatetimeInputDisabled {}
```

#### datetime-input-disabled.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00" disabled></ix-datetime-input>
```

### Vue Examples

#### datetime-input-disabled.vue
```vue
<script setup lang="ts">
import { IxDatetimeInput } from '@siemens/ix-vue';
</script>

<template>
  <IxDatetimeInput label="Date and time" value="2026/02/08 00:00:00" disabled></IxDatetimeInput>
</template>
```

## Label

### React Examples

#### datetime-input-label.tsx
```tsx
import { IxDatetimeInput } from '@siemens/ix-react';

function DatetimeInputLabel() {
  return (
    <IxDatetimeInput
      value="08.02.2026 00:00"
      label="Meeting schedule"
      format="dd.MM.yyyy HH:mm"
    ></IxDatetimeInput>
  );
}

export default DatetimeInputLabel;
```

### Angular Examples

#### datetime-input-label.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './datetime-input-label.html',
})
export default class DatetimeInputLabel {}
```

#### datetime-input-label.html
```html
<ix-datetime-input
  value="08.02.2026 00:00"
  label="Meeting schedule"
  format="dd.MM.yyyy HH:mm"
></ix-datetime-input>
```

### Angular Standalone Examples

#### datetime-input-label.ts
```ts
import { Component } from '@angular/core';
import { IxDatetimeInput } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxDatetimeInput],
  templateUrl: './datetime-input-label.html',
})
export default class DatetimeInputLabel {}
```

#### datetime-input-label.html
```html
<ix-datetime-input
  value="08.02.2026 00:00"
  label="Meeting schedule"
  format="dd.MM.yyyy HH:mm"
></ix-datetime-input>
```

### Vue Examples

#### datetime-input-label.vue
```vue
<script setup lang="ts">
import { IxDatetimeInput } from '@siemens/ix-vue';
</script>

<template>
  <IxDatetimeInput
    value="08.02.2026 00:00"
    label="Meeting schedule"
    format="dd.MM.yyyy HH:mm"
  ></IxDatetimeInput>
</template>
```

## Readonly

### React Examples

#### datetime-input-readonly.tsx
```tsx
import { IxDatetimeInput } from '@siemens/ix-react';

function DatetimeInputReadonly() {
  return <IxDatetimeInput label="Date and time" value="2026/02/08 00:00:00" readonly></IxDatetimeInput>;
}

export default DatetimeInputReadonly;
```

### Angular Examples

#### datetime-input-readonly.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './datetime-input-readonly.html',
})
export default class DatetimeInputReadonly {}
```

#### datetime-input-readonly.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00" readonly></ix-datetime-input>
```

### Angular Standalone Examples

#### datetime-input-readonly.ts
```ts
import { Component } from '@angular/core';
import { IxDatetimeInput } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxDatetimeInput],
  templateUrl: './datetime-input-readonly.html',
})
export default class DatetimeInputReadonly {}
```

#### datetime-input-readonly.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00" readonly></ix-datetime-input>
```

### Vue Examples

#### datetime-input-readonly.vue
```vue
<script setup lang="ts">
import { IxDatetimeInput } from '@siemens/ix-vue';
</script>

<template>
  <IxDatetimeInput label="Date and time" value="2026/02/08 00:00:00" readonly></IxDatetimeInput>
</template>
```

## Validation

### React Examples

#### datetime-input-validation.tsx
```tsx
import { IxDatetimeInput } from '@siemens/ix-react';

function DatetimeInputValidation() {
  return (
    <>
      <div>
        <IxDatetimeInput
          label="Info"
          value="2026/02/08 00:00:00"
          infoText="Info text"
          className="ix-info"
        ></IxDatetimeInput>
      </div>

      <div>
        <IxDatetimeInput
          label="Warning"
          value="2026/02/08 00:00:00"
          warningText="Warning text"
          className="ix-warning"
        ></IxDatetimeInput>
      </div>

      <div>
        <IxDatetimeInput
          label="Valid"
          value="2026/02/08 00:00:00"
          validText="Valid text"
          className="ix-valid"
        ></IxDatetimeInput>
      </div>

      <div>
        <IxDatetimeInput
          label="Invalid"
          value="2026/02/08 00:00:00"
          invalidText="Invalid text"
          className="ix-invalid"
        ></IxDatetimeInput>
      </div>
    </>
  );
}

export default DatetimeInputValidation;
```

### Angular Examples

#### datetime-input-validation.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './datetime-input-validation.html',
})
export default class DatetimeInputValidation {}
```

#### datetime-input-validation.html
```html
<div>
  <ix-datetime-input
    label="Info"
    value="2026/02/08 00:00:00"
    info-text='Info text'
    class='ix-info'
  ></ix-datetime-input>
</div>

<div>
  <ix-datetime-input
    label="Warning"
    value="2026/02/08 00:00:00"
    warning-text='Warning text'
    class='ix-warning'
  ></ix-datetime-input>
</div>

<div>
  <ix-datetime-input
    label="Valid"
    value="2026/02/08 00:00:00"
    valid-text='Valid text'
    class='ix-valid'
  ></ix-datetime-input>
</div>

<div>
  <ix-datetime-input
    label="Invalid"
    value="2026/02/08 00:00:00"
    invalid-text='Invalid text'
    class='ix-invalid'
  ></ix-datetime-input>
</div>
```

### Angular Standalone Examples

#### datetime-input-validation.ts
```ts
import { Component } from '@angular/core';
import { IxDatetimeInput } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxDatetimeInput],
  templateUrl: './datetime-input-validation.html',
})
export default class DatetimeInputValidation {}
```

#### datetime-input-validation.html
```html
<div>
  <ix-datetime-input
    label="Info"
    value="2026/02/08 00:00:00"
    info-text='Info text'
    class='ix-info'
  ></ix-datetime-input>
</div>

<div>
  <ix-datetime-input
    label="Warning"
    value="2026/02/08 00:00:00"
    warning-text='Warning text'
    class='ix-warning'
  ></ix-datetime-input>
</div>

<div>
  <ix-datetime-input
    label="Valid"
    value="2026/02/08 00:00:00"
    valid-text='Valid text'
    class='ix-valid'
  ></ix-datetime-input>
</div>

<div>
  <ix-datetime-input
    label="Invalid"
    value="2026/02/08 00:00:00"
    invalid-text='Invalid text'
    class='ix-invalid'
  ></ix-datetime-input>
</div>
```

### Vue Examples

#### datetime-input-validation.vue
```vue
<script setup lang="ts">
import { IxDatetimeInput } from '@siemens/ix-vue';
</script>

<template>
  <div>
    <IxDatetimeInput label="Info" value="2026/02/08 00:00:00" info-text="Info text" class="ix-info"></IxDatetimeInput>
  </div>

  <div>
    <IxDatetimeInput label="Warning" value="2026/02/08 00:00:00" warning-text="Warning text" class="ix-warning"></IxDatetimeInput>
  </div>

  <div>
    <IxDatetimeInput label="Valid" value="2026/02/08 00:00:00" valid-text="Valid text" class="ix-valid"></IxDatetimeInput>
  </div>

  <div>
    <IxDatetimeInput label="Invalid" value="2026/02/08 00:00:00" invalid-text="Invalid text" class="ix-invalid"></IxDatetimeInput>
  </div>
</template>
```

## Slots

### React Examples

#### datetime-input-with-slots.tsx
```tsx
import { IxDatetimeInput, IxIcon, IxTypography } from '@siemens/ix-react';

function DatetimeInputWithSlots() {
  return (
    <IxDatetimeInput label="Date and time" value="2026/02/08 00:00:00">
      <IxIcon slot="start" name="bulb" size="16" aria-label="Info"></IxIcon>
      <IxTypography slot="end">Slot</IxTypography>
    </IxDatetimeInput>
  );
}

export default DatetimeInputWithSlots;
```

### Angular Examples

#### datetime-input-with-slots.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './datetime-input-with-slots.html',
})
export default class DatetimeInputWithSlots {}
```

#### datetime-input-with-slots.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00">
  <ix-icon slot="start" name="bulb" size="16" aria-label="Info"></ix-icon>
  <ix-typography slot="end">Slot</ix-typography>
</ix-datetime-input>
```

### Angular Standalone Examples

#### datetime-input-with-slots.ts
```ts
import { Component } from '@angular/core';
import { IxDatetimeInput, IxIcon, IxTypography } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxDatetimeInput, IxIcon, IxTypography],
  templateUrl: './datetime-input-with-slots.html',
})
export default class DatetimeInputWithSlots {}
```

#### datetime-input-with-slots.html
```html
<ix-datetime-input label="Date and time" value="2026/02/08 00:00:00">
  <ix-icon slot="start" name="bulb" size="16" aria-label="Info"></ix-icon>
  <ix-typography slot="end">Slot</ix-typography>
</ix-datetime-input>
```

### Vue Examples

#### datetime-input-with-slots.vue
```vue
<script setup lang="ts">
import { IxDatetimeInput, IxIcon, IxTypography } from '@siemens/ix-vue';
</script>

<template>
  <IxDatetimeInput label="Date and time" value="2026/02/08 00:00:00">
    <IxIcon slot="start" name="bulb" size="16" aria-label="Info"></IxIcon>
    <IxTypography slot="end">Slot</IxTypography>
  </IxDatetimeInput>
</template>
```

## Min- and max-date

### React Examples

#### datetime-input-min-max-date.tsx
```tsx
import { IxDatetimeInput } from '@siemens/ix-react';

function DatetimeInputMinMaxDate() {
  return (
    <IxDatetimeInput
      label="Date and time"
      value="2026/02/08 00:00:00"
      minDate="2026/02/01"
      maxDate="2026/02/28"
    ></IxDatetimeInput>
  );
}

export default DatetimeInputMinMaxDate;
```

### Angular Examples

#### datetime-input-min-max-date.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './datetime-input-min-max-date.html',
})
export default class DatetimeInputMinMaxDate {}
```

#### datetime-input-min-max-date.html
```html
<ix-datetime-input
  label="Date and time"
  value="2026/02/08 00:00:00"
  minDate="2026/02/01"
  maxDate="2026/02/28"
></ix-datetime-input>
```

### Angular Standalone Examples

#### datetime-input-min-max-date.ts
```ts
import { Component } from '@angular/core';
import { IxDatetimeInput } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxDatetimeInput],
  templateUrl: './datetime-input-min-max-date.html',
})
export default class DatetimeInputMinMaxDate {}
```

#### datetime-input-min-max-date.html
```html
<ix-datetime-input
  label="Date and time"
  value="2026/02/08 00:00:00"
  minDate="2026/02/01"
  maxDate="2026/02/28"
></ix-datetime-input>
```

### Vue Examples

#### datetime-input-min-max-date.vue
```vue
<script setup lang="ts">
import { IxDatetimeInput } from '@siemens/ix-vue';
</script>

<template>
  <IxDatetimeInput
    label="Date and time"
    value="2026/02/08 00:00:00"
    minDate="2026/02/01"
    maxDate="2026/02/28"
  ></IxDatetimeInput>
</template>
```

## API for ix-datetime-input

### Properties

| Name | Description | Attribute | Type | Default |
| --- | --- | --- | --- | --- |
| ariaLabelCalendarButton | { "ARIA label for the calendar icon button\n\nWill be set as aria-label on the nested HTML button element" } | aria-label-calendar-button | string \| undefined | 'Toggle calendar' |
| ariaLabelNextMonthButton | { "ARIA label for next month navigation button" } | aria-label-next-month-button | string \| undefined | 'Next month' |
| ariaLabelPreviousMonthButton | { "ARIA label for previous month navigation button" } | aria-label-previous-month-button | string \| undefined | 'Previous month' |
| disabled | { "Whether the input is disabled" } | disabled | boolean | false |
| enableTopLayer | { "Enable Popover API rendering for dropdown." } | enable-top-layer | boolean | false |
| format | { "Luxon date and time format for display (e.g., 'yyyy/LL/dd HH:mm:ss' → \"2026/01/20 13:07:04\").\n\nSee [https://moment.github.io/luxon/#/formatting?id=table-of-tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) for all available tokens." } | format | string | 'yyyy/LL/dd HH:mm:ss' |
| helperText | { "Helper text displayed below the input" } | helper-text | string \| undefined |  |
| i18nDone | { "Text for confirm button in picker (prop name matches datetime-picker)" } | i-1-8n-done | string | 'Confirm' |
| i18nErrorDateTimeUnparsable | { "Error message when datetime cannot be parsed" } | i-1-8n-error-date-time-unparsable | string | 'Date time is not valid' |
| i18nTime | { "Header text for time picker section" } | i-1-8n-time | string | 'Time' |
| infoText | { "Informational message" } | info-text | string \| undefined |  |
| invalidText | { "Validation message for invalid state" } | invalid-text | string \| undefined |  |
| label | { "Label text displayed above the input" } | label | string \| undefined |  |
| locale | { "Locale for date/time formatting (e.g., 'en-US', 'de-DE')" } | locale | string \| undefined |  |
| maxDate | { "Maximum allowed date (matching format or date-only, e.g., \"2026/12/31\")" } | max-date | string \| undefined |  |
| maxTime | { "Latest selectable time (tokens matching the time portion of `format`). Invalid non-empty values are ignored." } | max-time | string \| undefined |  |
| minDate | { "Minimum allowed date (matching format or date-only, e.g., \"2026/01/20\")" } | min-date | string \| undefined |  |
| minTime | { "Earliest selectable time (tokens matching the time portion of `format`). Invalid non-empty values are ignored." } | min-time | string \| undefined |  |
| name | { "Name of the form control for form submission" } | name | string \| undefined |  |
| placeholder | { "Placeholder text when input is empty" } | placeholder | string \| undefined |  |
| readonly | { "Whether the input is read-only (calendar icon hidden)" } | readonly | boolean | false |
| required | { "Whether the field is required" } | required | boolean | false |
| showTextAsTooltip | { "Show helper text as tooltip instead of below input" } | show-text-as-tooltip | boolean | false |
| showWeekNumbers | { "Show week numbers in date picker" } | show-week-numbers | boolean | false |
| suppressSubmitOnEnter | { "Prevent form submission when Enter is pressed" } | suppress-submit-on-enter | boolean | false |
| textAlignment | { "Text alignment within the input field" } | text-alignment | "end" \| "start" | 'start' |
| validText | { "Success/valid message" } | valid-text | string \| undefined |  |
| value | { "Value in display format (e.g., \"2026/01/21 13:07:04\" for default format)" } | value | string \| undefined | '' |
| warningText | { "Warning message" } | warning-text | string \| undefined |  |
| weekStartIndex | { "First day of week (0=Sunday, 1=Monday, etc.)" } | week-start-index | number | 0 |

### Events

| Name | Description | Event | Detail |
| --- | --- | --- | --- |
| ixBlur | { "Emitted when the input loses focus" } | ixBlur | void |
| ixChange | { "Emitted when the date/time value changes via user interaction.\n\nFires in two scenarios:\n\n- When the input loses focus (blur) and the value has changed\n\n- When a new date/time is selected in the picker and confirmed\n\nDoes NOT fire when:\n\n- The picker is opened/closed without confirming a change\n\n- The input is blurred without modifying the value\n\n- The value is changed programmatically via the value property" } | ixChange | string \| undefined |
| ixFocus | { "Emitted when the input receives focus" } | ixFocus | void |
| validityStateChange | { "Emitted when validation state changes" } | validityStateChange | DateTimeInputValidityState |
| valueChange | { "Emitted when the datetime value changes. Payload is display format or undefined" } | valueChange | string \| undefined |

### Slot

| Name | Description |
| --- | --- |
| end | { "Element will be displayed at the end of the input" } |
| start | { "Element will be displayed at the start of the input" } |