chore: add dateinputs demo

Author: georgi-sla

examples-standalone/kendoangular-landing-page/src/app/components/date-inputs/date-inputs.component.css

@@ -0,0 +1,21 @@
+.grid {
+    display: flex;
+    grid: auto auto / 1fr 1fr;
+    grid-gap: 40px;
+    justify-content: center;
+    align-items: center;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.component {
+    width: 460px;
+}
+
+.k-daterangepicker {
+    justify-content: space-between;
+}

examples-standalone/kendoangular-landing-page/src/app/components/date-inputs/date-inputs.component.html

@@ -0,0 +1,28 @@
+<div class="grid">
+    <div class="wrapper">
+        <div class="component">
+            <p>DatePicker</p>
+            <kendo-datepicker [(value)]="range.start"></kendo-datepicker>
+        </div>
+        <div class="component">
+            <p>DateTimePicker</p>
+            <kendo-datetimepicker [(value)]="range.start"></kendo-datetimepicker>
+        </div>
+        <div class="component">
+            <p>DateRange</p>
+            <div class="daterange-wrapper">
+                <kendo-daterange>
+                    <kendo-floatinglabel text="Check-in">
+                        <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
+                    </kendo-floatinglabel>
+                    <kendo-floatinglabel text="Check-out">
+                        <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
+                    </kendo-floatinglabel>
+                </kendo-daterange>
+            </div>
+        </div>
+    </div>
+    <div>
+        <kendo-calendar [(value)]="range" selection="range"></kendo-calendar>
+    </div>
+</div>

examples-standalone/kendoangular-landing-page/src/app/components/date-inputs/date-inputs.component.ts

@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { KENDO_DATEINPUTS } from '@progress/kendo-angular-dateinputs';
+import { KENDO_LABELS } from '@progress/kendo-angular-label';
+
+@Component({
+    selector: 'app-date-inputs',
+    imports: [KENDO_DATEINPUTS, KENDO_LABELS],
+    encapsulation: ViewEncapsulation.None,
+    templateUrl: './date-inputs.component.html',
+    styleUrl: './date-inputs.component.css',
+})
+export class DateInputsComponent {
+    public range = { start: new Date(), end: new Date() };
+}