Skip to content

fix(daterangepicker): prevent full-width spanning and unintended click targets #5668

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.

Sign up for GitHub

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

Draft
Copilot wants to merge 3 commits into
base: develop
Choose a base branch
from
Draft

fix(daterangepicker): prevent full-width spanning and unintended click targets #5668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f17d38
Initial plan
Copilot Nov 7, 2025
005378e
fix(daterangepicker): change width from 100% to auto and display to i…
Copilot Nov 7, 2025
1740b41
chore: update visual previews
kendo-bot Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/bootstrap/docs/customization-date-range-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@ The following table lists the available variables for customization.
</thead>
<tbody>
<tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
10 changes: 10 additions & 0 deletions packages/bootstrap/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10996,6 +10996,16 @@ The following table lists the available variables for customizing the Bootstrap
</tr>
</thead>
<tbody><tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
5 changes: 5 additions & 0 deletions packages/bootstrap/scss/daterangepicker/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
// Daterangepicker
/// The width of the DateRangePicker component.
/// @group date-range-picker
$kendo-daterange-picker-width: auto !default;

/// The width of the DateRangePicker input.
/// @group date-range-picker
$kendo-daterange-picker-input-width: 10em !default;


@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with (
$kendo-daterange-picker-width: $kendo-daterange-picker-width,
$kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
);
10 changes: 10 additions & 0 deletions packages/classic/docs/customization-date-range-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@ The following table lists the available variables for customization.
</thead>
<tbody>
<tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
10 changes: 10 additions & 0 deletions packages/classic/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10986,6 +10986,16 @@ The following table lists the available variables for customizing the Classic th
</tr>
</thead>
<tbody><tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
5 changes: 5 additions & 0 deletions packages/classic/scss/daterangepicker/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
// Daterangepicker
/// The width of the DateRangePicker component.
/// @group date-range-picker
$kendo-daterange-picker-width: auto !default;

/// The width of the DateRangePicker input.
/// @group date-range-picker
$kendo-daterange-picker-input-width: 10em !default;


@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with (
$kendo-daterange-picker-width: $kendo-daterange-picker-width,
$kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
);
58 changes: 58 additions & 0 deletions packages/core/docs/customization-date-range-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: Customizing DateRangePicker
description: "Refer to the list of the Kendo UI Theme Core theme variables available for customization."
slug: variables_kendothemecore_date-range-picker
position: 9
---

# Customizing DateRangePicker

## Variables

The following table lists the available variables for customization.

<table class="theme-variables">
<colgroup>
<col style="width: 200px; white-space:nowrap;" />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</thead>
<tbody>
<tr>
<td>$kendo-daterange-picker-width</td>
<td></td>
<td><code>null</code></td>
<td></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td></td>
<td><code>null</code></td>
<td></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of each input field within the DateRangePicker.</div></div>
</td>
</tr>
</tbody>
</table>

## Suggested Links

* [Styling Overview]({% slug themesandstyles %})
* [Web Font Icons]({% slug icons %})
* [Preview of the Themed Components](../)

40 changes: 40 additions & 0 deletions packages/core/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3326,6 +3326,46 @@ The following table lists the available variables for customizing the Theme Core
</tbody>
</table>

### DateRangePicker

<table class="theme-variables">
<colgroup>
<col style="width: 200px; white-space:nowrap;" />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</thead>
<tbody><tr>
<td>$kendo-daterange-picker-width</td>
<td></td>
<td><code>null</code></td>
<td></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td></td>
<td><code>null</code></td>
<td></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of each input field within the DateRangePicker.</div></div>
</td>
</tr>
</tbody>
</table>

### Elevation

<table class="theme-variables">
Expand Down
4 changes: 2 additions & 2 deletions packages/core/scss/components/daterangepicker/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

// Daterange picker
.k-daterange-picker {
width: $kendo-input-default-width;
display: flex;
width: $kendo-daterange-picker-width;
display: inline-flex;
flex-flow: row nowrap;
align-items: flex-end;
gap: k-spacing(2);
Expand Down
6 changes: 6 additions & 0 deletions packages/core/scss/components/daterangepicker/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
// Daterangepicker
/// The width of the DateRangePicker component.
/// @group date-range-picker
$kendo-daterange-picker-width: null !default;

/// The width of each input field within the DateRangePicker.
/// @group date-range-picker
$kendo-daterange-picker-input-width: null !default;
10 changes: 10 additions & 0 deletions packages/default/docs/customization-date-range-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@ The following table lists the available variables for customization.
</thead>
<tbody>
<tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
10 changes: 10 additions & 0 deletions packages/default/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11056,6 +11056,16 @@ The following table lists the available variables for customizing the Default th
</tr>
</thead>
<tbody><tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
5 changes: 5 additions & 0 deletions packages/default/scss/daterangepicker/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
// Daterangepicker
/// The width of the DateRangePicker component.
/// @group date-range-picker
$kendo-daterange-picker-width: auto !default;

/// The width of the DateRangePicker input.
/// @group date-range-picker
$kendo-daterange-picker-input-width: 10em !default;

@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with (
$kendo-daterange-picker-width: $kendo-daterange-picker-width,
$kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
);
6 changes: 3 additions & 3 deletions packages/fluent/docs/customization-date-range-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ The following table lists the available variables for customization.
<tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>var( --kendo-input-width, #{$kendo-input-width} )</code></td>
<td><code>var(--kendo-input-width, var(--kendo-input-width, 100%))</code></td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker.</div></div>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
Expand Down
6 changes: 3 additions & 3 deletions packages/fluent/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11303,11 +11303,11 @@ The following table lists the available variables for customizing the Fluent the
<tbody><tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>var( --kendo-input-width, #{$kendo-input-width} )</code></td>
<td><code>var(--kendo-input-width, var(--kendo-input-width, 100%))</code></td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker.</div></div>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
Expand Down
6 changes: 4 additions & 2 deletions packages/fluent/scss/daterangepicker/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
@use "../input/_variables.scss" as *;

// Daterangepicker
/// The width of the DateRangePicker.
/// The width of the DateRangePicker component.
/// @group date-range-picker
$kendo-daterange-picker-width: var( --kendo-input-width, #{$kendo-input-width} ) !default;
$kendo-daterange-picker-width: auto !default;

/// The width of the DateRangePicker input.
/// @group date-range-picker
$kendo-daterange-picker-input-width: 10em !default;
Expand All @@ -20,5 +21,6 @@ $kendo-daterange-picker-disabled-bg: var( --kendo-daterange-picker-disabled-bg,
$kendo-daterange-picker-disabled-border: var( --kendo-daterange-picker-disabled-border, currentColor ) !default;

@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with (
$kendo-daterange-picker-width: $kendo-daterange-picker-width,
$kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
);
10 changes: 10 additions & 0 deletions packages/material/docs/customization-date-range-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@ The following table lists the available variables for customization.
</thead>
<tbody>
<tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
10 changes: 10 additions & 0 deletions packages/material/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11059,6 +11059,16 @@ The following table lists the available variables for customizing the Material t
</tr>
</thead>
<tbody><tr>
<td>$kendo-daterange-picker-width</td>
<td>String</td>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the DateRangePicker component.</div></div>
</td>
</tr>
<tr>
<td>$kendo-daterange-picker-input-width</td>
<td>Number</td>
<td><code>10em</code></td>
Expand Down
5 changes: 5 additions & 0 deletions packages/material/scss/daterangepicker/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
// Daterangepicker
/// The width of the DateRangePicker component.
/// @group date-range-picker
$kendo-daterange-picker-width: auto !default;

/// The width of the DateRangePicker input.
/// @group date-range-picker
$kendo-daterange-picker-input-width: 10em !default;

@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with (
$kendo-daterange-picker-width: $kendo-daterange-picker-width,
$kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
);
Loading