feat(datetime-input): add component #IX-3628 #2359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

alexkaduk wants to merge 19 commits into main from feature/IX-3861-datetime-input

.changeset/add-datetime-input-component.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    '@siemens/ix': minor
+    ---
+    Added `ix-datetime-input` component - a combined date and time input field with integrated picker functionality.

packages/angular-standalone-test-app/src/app/app.routes.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -333,6 +333,53 @@ export const routes: Routes = [ @@
             loadComponent: () =>
               import('../preview-examples/datetimepicker').then((m) => m.default),
           },
+          {
+            path: 'datetime-input',
+            loadComponent: () =>
+              import('../preview-examples/datetime-input').then((m) => m.default),
+          },
+          {
+            path: 'datetime-input-disabled',
+            loadComponent: () =>
+              import('../preview-examples/datetime-input-disabled').then(
+                (m) => m.default
+              ),
+          },
+          {
+            path: 'datetime-input-label',
+            loadComponent: () =>
+              import('../preview-examples/datetime-input-label').then(
+                (m) => m.default
+              ),
+          },
+          {
+            path: 'datetime-input-min-max-date',
+            loadComponent: () =>
+              import('../preview-examples/datetime-input-min-max-date').then(
+                (m) => m.default
+              ),
+          },
+          {
+            path: 'datetime-input-readonly',
+            loadComponent: () =>
+              import('../preview-examples/datetime-input-readonly').then(
+                (m) => m.default
+              ),
+          },
+          {
+            path: 'datetime-input-validation',
+            loadComponent: () =>
+              import('../preview-examples/datetime-input-validation').then(
+                (m) => m.default
+              ),
+          },
+          {
+            path: 'datetime-input-with-slots',
+            loadComponent: () =>
+              import('../preview-examples/datetime-input-with-slots').then(
+                (m) => m.default
+              ),
+          },
           {
             path: 'divider',
             loadComponent: () =>
@@ Expand Down @@

packages/angular-standalone-test-app/src/preview-examples/datetime-input-disabled.html

-Original file line number
+Diff line change
@@ -0,0 +1,10 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <ix-datetime-input value="1970/01/01 00:00:00" disabled></ix-datetime-input>

packages/angular-standalone-test-app/src/preview-examples/datetime-input-disabled.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * SPDX-FileCopyrightText: 2025 Siemens AG
+     *
+     * SPDX-License-Identifier: MIT
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    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 {}

packages/angular-standalone-test-app/src/preview-examples/datetime-input-label.html

-Original file line number
+Diff line change
@@ -0,0 +1,15 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <ix-datetime-input
+      value="01.01.1970 00:00"
+      label="Meeting schedule"
+      dateFormat="dd.MM.yyyy"
+      timeFormat="HH:mm"
+    ></ix-datetime-input>

packages/angular-standalone-test-app/src/preview-examples/datetime-input-label.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * SPDX-FileCopyrightText: 2025 Siemens AG
+     *
+     * SPDX-License-Identifier: MIT
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    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 {}

packages/angular-standalone-test-app/src/preview-examples/datetime-input-min-max-date.html

-Original file line number
+Diff line change
@@ -0,0 +1,14 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <ix-datetime-input
+      value="1970/01/01 00:00:00"
+      minDate="1970/01/01"
+      maxDate="1970/12/31"
+    ></ix-datetime-input>

packages/angular-standalone-test-app/src/preview-examples/datetime-input-min-max-date.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * SPDX-FileCopyrightText: 2025 Siemens AG
+     *
+     * SPDX-License-Identifier: MIT
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    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 {}

packages/angular-standalone-test-app/src/preview-examples/datetime-input-readonly.html

-Original file line number
+Diff line change
@@ -0,0 +1,10 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <ix-datetime-input value="1970/01/01 00:00:00" readonly></ix-datetime-input>

packages/angular-standalone-test-app/src/preview-examples/datetime-input-readonly.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * SPDX-FileCopyrightText: 2025 Siemens AG
+     *
+     * SPDX-License-Identifier: MIT
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    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 {}

packages/angular-standalone-test-app/src/preview-examples/datetime-input-validation.html

-Original file line number
+Diff line change
@@ -0,0 +1,40 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <div>
+      <ix-datetime-input
+        value="1970/01/01 00:00:00"
+        info-text='Info text'
+        class='ix-info'
+      ></ix-datetime-input>
+    </div>
+    <div>
+      <ix-datetime-input
+        value="1970/01/01 00:00:00"
+        warning-text='Warning text'
+        class='ix-warning'
+      ></ix-datetime-input>
+    </div>
+    <div>
+      <ix-datetime-input
+        value="1970/01/01 00:00:00"
+        valid-text='Valid text'
+        class='ix-valid'
+      ></ix-datetime-input>
+    </div>
+    <div>
+      <ix-datetime-input
+        value="1970/01/01 00:00:00"
+        invalid-text='Invalid text'
+        class='ix-invalid'
+      ></ix-datetime-input>
+    </div>

packages/angular-standalone-test-app/src/preview-examples/datetime-input-validation.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * SPDX-FileCopyrightText: 2025 Siemens AG
+     *
+     * SPDX-License-Identifier: MIT
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    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 {}

packages/angular-standalone-test-app/src/preview-examples/datetime-input-with-slots.html

-Original file line number
+Diff line change
@@ -0,0 +1,13 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <ix-datetime-input value="1970/01/01 00:00:00">
+      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
+      <ix-typography slot="end">Slot</ix-typography>
+    </ix-datetime-input>

packages/angular-standalone-test-app/src/preview-examples/datetime-input-with-slots.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * SPDX-FileCopyrightText: 2025 Siemens AG
+     *
+     * SPDX-License-Identifier: MIT
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    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 {}

packages/angular-standalone-test-app/src/preview-examples/datetime-input.html

-Original file line number
+Diff line change
@@ -0,0 +1,10 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <ix-datetime-input value="1970/01/01 00:00:00"></ix-datetime-input>

packages/angular-standalone-test-app/src/preview-examples/datetime-input.ts

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    /*
+     * SPDX-FileCopyrightText: 2025 Siemens AG
+     *
+     * SPDX-License-Identifier: MIT
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    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 {}

packages/angular-test-app/src/app/app-routing.module.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -64,6 +64,13 @@ import Datepicker from '../preview-examples/datepicker'; @@
     import DatepickerLocale from '../preview-examples/datepicker-locale';
     import DatepickerRange from '../preview-examples/datepicker-range';
     import Datetimepicker from '../preview-examples/datetimepicker';
+    import DatetimeInput from '../preview-examples/datetime-input';
+    import DatetimeInputDisabled from '../preview-examples/datetime-input-disabled';
+    import DatetimeInputLabel from '../preview-examples/datetime-input-label';
+    import DatetimeInputMinMaxDate from '../preview-examples/datetime-input-min-max-date';
+    import DatetimeInputReadonly from '../preview-examples/datetime-input-readonly';
+    import DatetimeInputValidation from '../preview-examples/datetime-input-validation';
+    import DatetimeInputWithSlots from '../preview-examples/datetime-input-with-slots';
     import Divider from '../preview-examples/divider';
     import Drawer from '../preview-examples/drawer';
     import DrawerFullHeight from '../preview-examples/drawer-full-height';
@@ Expand Down Expand Up / @@ -486,6 +493,34 @@ const routes: Routes = [ @@
             path: 'datetimepicker',
             component: Datetimepicker,
           },
+          {
+            path: 'datetime-input',
+            component: DatetimeInput,
+          },
+          {
+            path: 'datetime-input-disabled',
+            component: DatetimeInputDisabled,
+          },
+          {
+            path: 'datetime-input-label',
+            component: DatetimeInputLabel,
+          },
+          {
+            path: 'datetime-input-min-max-date',
+            component: DatetimeInputMinMaxDate,
+          },
+          {
+            path: 'datetime-input-readonly',
+            component: DatetimeInputReadonly,
+          },
+          {
+            path: 'datetime-input-validation',
+            component: DatetimeInputValidation,
+          },
+          {
+            path: 'datetime-input-with-slots',
+            component: DatetimeInputWithSlots,
+          },
           {
             path: 'divider',
             component: Divider,
@@ Expand Down @@

packages/angular-test-app/src/app/app.module.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -73,6 +73,13 @@ import Datepicker from '../preview-examples/datepicker'; @@
     import DatepickerLocale from '../preview-examples/datepicker-locale';
     import DatepickerRange from '../preview-examples/datepicker-range';
     import Datetimepicker from '../preview-examples/datetimepicker';
+    import DatetimeInput from '../preview-examples/datetime-input';
+    import DatetimeInputDisabled from '../preview-examples/datetime-input-disabled';
+    import DatetimeInputLabel from '../preview-examples/datetime-input-label';
+    import DatetimeInputMinMaxDate from '../preview-examples/datetime-input-min-max-date';
+    import DatetimeInputReadonly from '../preview-examples/datetime-input-readonly';
+    import DatetimeInputValidation from '../preview-examples/datetime-input-validation';
+    import DatetimeInputWithSlots from '../preview-examples/datetime-input-with-slots';
     import Divider from '../preview-examples/divider';
     import Drawer from '../preview-examples/drawer';
     import DrawerFullHeight from '../preview-examples/drawer-full-height';
@@ Expand Down Expand Up @@
         Datepicker,
         DatepickerLocale,
         Datetimepicker,
+        DatetimeInput,
+        DatetimeInputDisabled,
+        DatetimeInputLabel,
+        DatetimeInputMinMaxDate,
+        DatetimeInputReadonly,
+        DatetimeInputValidation,
+        DatetimeInputWithSlots,
         Divider,
         DrawerFullHeight,
         Drawer,
@@ Expand Down @@

packages/angular-test-app/src/preview-examples/datetime-input-disabled.html

-Original file line number
+Diff line change
@@ -0,0 +1,10 @@
+    <!--
+    SPDX-FileCopyrightText: 2024 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <ix-datetime-input value="1970/01/01 00:00:00" disabled></ix-datetime-input>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(datetime-input): add component #IX-3628 #2359

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

feat(datetime-input): add component #IX-3628 #2359

Are you sure you want to change the base?

Uh oh!

feat(datetime-input): add component #IX-3628 #2359

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!