feat(datepicker): add support for date range (#1663)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?
New feature - Date range picker.

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

.storybook/stories/datepicker/datepicker.stories.ts

@@ -44,7 +44,7 @@ export default {
     // outputs
     clrDateChange: action('clrDateChange'),
     // story helpers
-    getDateObject: date => new Date(date),
+    getDateObject: date => date && new Date(date),
     getDateString: date => date && new Date(date).toISOString().split('T')[0],
   },
 };
@@ -57,7 +57,7 @@ const DatePickerTemplate: StoryFn = args => ({
         #date
         type="date"
         [id]="id"
-        [clrDate]="getDateObject(clrDate || date.value)"
+        [clrDate]="getDateObject(clrDate)"
         [min]="getDateString(min)"
         [max]="getDateString(max)"
         [disabled]="disabled"
@@ -77,7 +77,7 @@ export const Datepicker: StoryObj = {
 export const DefaultDate: StoryObj = {
   render: DatePickerTemplate,
   args: {
-    clrDate: '2022-01-01 00:00:00.000',
+    clrDate: '2025-01-01 00:00:00.000',
   },
 };
 

.storybook/stories/datepicker/daterangepicker.stories.ts

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { ClrDatepickerModule, ClrEndDateInput, ClrStartDateInput } from '@clr/angular';
+import { action } from '@storybook/addon-actions';
+import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
+
+import { CommonModules } from '../../helpers/common';
+
+export default {
+  title: 'Datepicker/DateRangepicker',
+  component: ClrStartDateInput,
+  subcomponents: { ClrEndDateInput },
+  decorators: [
+    moduleMetadata({
+      imports: [...CommonModules, ClrDatepickerModule],
+    }),
+  ],
+  argTypes: {
+    // inputs
+    clrStartDate: { control: { type: 'date' } },
+    clrEndDate: { control: { type: 'date' } },
+    max: { control: { type: 'date' } },
+    min: { control: { type: 'date' } },
+    disabled: { control: { type: 'boolean' } },
+    // outputs
+    clrStartDateChange: { control: { disable: true } },
+    clrEndDateChange: { control: { disable: true } },
+    // methods
+    onValueChange: { control: { disable: true }, table: { disable: true } },
+    setFocusStates: { control: { disable: true }, table: { disable: true } },
+    triggerValidation: { control: { disable: true }, table: { disable: true } },
+    getProviderFromContainer: { control: { disable: true }, table: { disable: true } },
+    // story helpers
+    getDateObject: { control: { disable: true }, table: { disable: true } },
+    getDateString: { control: { disable: true }, table: { disable: true } },
+    predefinedDateRanges: { control: { type: 'object' } },
+  },
+  args: {
+    disabled: false,
+    placeholder: '',
+    id: '',
+    // outputs
+    clrStartDateChange: action('clrStartDateChange'),
+    clrEndDateChange: action('clrEndDateChange'),
+    // story helpers
+    getDateObject: date => date && new Date(date),
+    getDateString: date => date && new Date(date).toISOString().split('T')[0],
+    predefinedDateRanges: [],
+  },
+};
+
+const DateRangePickerTemplate: StoryFn = args => ({
+  template: `
+    <clr-date-range-container [min]="getDateString(min)" [max]="getDateString(max)" [rangeOptions]="predefinedDateRanges">
+      <label for="dateRangeCtrl">Date Range</label>
+      <input
+        id="startDate"
+        aria-labelledby="dateRangeCtrl"
+        name="startDate"
+        type="date"
+        [disabled]="disabled"
+        [clrStartDate]="getDateObject(clrStartDate)"
+        (clrStartDateChange)="clrStartDateChange($event)"
+      />
+      <input
+        id="endDate"
+        aria-labelledby="dateRangeCtrl"
+        name="endDate"
+        type="date"
+        [disabled]="disabled"
+        [clrEndDate]="getDateObject(clrEndDate)"
+        (clrEndDateChange)="clrEndDateChange($event)"
+      />
+    </clr-date-range-container>
+  `,
+  props: { ...args },
+});
+
+export const DateRangePicker: StoryObj = {
+  render: DateRangePickerTemplate,
+};
+
+export const Disabled: StoryObj = {
+  render: DateRangePickerTemplate,
+  args: {
+    disabled: true,
+  },
+};
+
+export const PredefinedDateRanges: StoryObj = {
+  render: DateRangePickerTemplate,
+  args: {
+    predefinedDateRanges: [
+      { label: 'Today', value: [new Date(), new Date()] },
+      { label: 'Last 7 Days', value: [addDays(new Date(), -7), addDays(new Date(), -1)] },
+      { label: 'Last 14 Days', value: [addDays(new Date(), -14), addDays(new Date(), -1)] },
+      { label: 'Last 30 Days', value: [addDays(new Date(), -30), addDays(new Date(), -1)] },
+      { label: 'Last 90 Days', value: [addDays(new Date(), -90), addDays(new Date(), -1)] },
+    ],
+  },
+};
+
+function addDays(date = new Date(), days: number) {
+  return new Date(date.getTime() + 86400000 * days);
+}