Implement DatePickerRange

Author: KoolADE85

components/dash-core-components/src/components/DatePickerRange.tsx

@@ -0,0 +1,68 @@
+import React, {lazy, Suspense} from 'react';
+import datePickerRange from '../utils/LazyLoader/datePickerRange';
+import transformDate from '../utils/DatePickerPersistence';
+import {DatePickerRangeProps, PersistedProps, PersistenceTypes} from '../types';
+
+const RealDatePickerRange = lazy(datePickerRange);
+
+/**
+ * DatePickerRange is a tailor made component designed for selecting
+ * timespan across multiple days off of a calendar.
+ *
+ * The DatePicker integrates well with the Python datetime module with the
+ * startDate and endDate being returned in a string format suitable for
+ * creating datetime objects.
+ *
+ */
+export default function DatePickerRange({
+    calendar_orientation = 'horizontal',
+    is_RTL = false,
+    // eslint-disable-next-line no-magic-numbers
+    day_size = 34,
+    with_portal = false,
+    with_full_screen_portal = false,
+    first_day_of_week = 0,
+    number_of_months_shown = 2,
+    stay_open_on_select = false,
+    reopen_calendar_on_clear = false,
+    clearable = false,
+    disabled = false,
+    updatemode = 'singledate',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persisted_props = [PersistedProps.start_date, PersistedProps.end_date],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persistence_type = PersistenceTypes.local,
+    disabled_days = [],
+    ...props
+}: DatePickerRangeProps) {
+    return (
+        <Suspense fallback={null}>
+            <RealDatePickerRange
+                calendar_orientation={calendar_orientation}
+                is_RTL={is_RTL}
+                day_size={day_size}
+                with_portal={with_portal}
+                with_full_screen_portal={with_full_screen_portal}
+                first_day_of_week={first_day_of_week}
+                number_of_months_shown={number_of_months_shown}
+                stay_open_on_select={stay_open_on_select}
+                reopen_calendar_on_clear={reopen_calendar_on_clear}
+                clearable={clearable}
+                disabled={disabled}
+                disabled_days={disabled_days}
+                updatemode={updatemode}
+                {...props}
+            />
+        </Suspense>
+    );
+}
+
+DatePickerRange.dashPersistence = {
+    persisted_props: [PersistedProps.start_date, PersistedProps.end_date],
+    persistence_type: PersistenceTypes.local,
+};
+
+DatePickerRange.persistenceTransforms = {
+    end_date: transformDate,
+    start_date: transformDate,
+};

components/dash-core-components/src/components/css/datepickers.css

@@ -32,6 +32,14 @@
     grid-template-columns: auto 1fr auto auto;
 }
 
+.dash-datepicker-input-wrapper:has(:nth-child(5)) {
+    grid-template-columns: auto auto auto 1fr auto;
+}
+
+.dash-datepicker-input-wrapper:has(:nth-child(6)) {
+    grid-template-columns: auto auto auto 1fr auto auto;
+}
+
 .dash-datepicker-input-wrapper,
 .dash-datepicker-content {
     border-radius: var(--Dash-Spacing);
@@ -42,7 +50,7 @@
 
 .dash-datepicker-input {
     height: 34px;
-    width: 100%;
+    width: fit-content;
     border: none;
     outline: none;
     border-radius: 4px;