Skip to content

fix(date-picker): fix discrepencies in datepicker #17282

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

Open
didimmova wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix(date-picker): fix discrepencies in datepicker #17282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13c53f5
fix(date-picker): fix discrepencies in datepicker
didimmova May 18, 2026
b6a2a42
Merge branch 'master' into didimmova/fix-date-picker-discrepancies
didimmova May 19, 2026
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
2 changes: 1 addition & 1 deletion ...ects/igniteui-angular/core/src/core/styles/components/date-picker/_date-picker-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
display: flex;
align-items: center;
justify-content: flex-end;
padding: pad(rem(8px));
gap: rem(8px);
}

%date-picker__actions {
Expand Down
4 changes: 2 additions & 2 deletions ...-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@if (cancelButtonLabel) {
<button
#cancelButton type="button"
igxButton="flat" igxRipple
[igxButton]="cancelButtonType" igxRipple
(click)="calendarCancel.emit({ owner: this})"
>
{{ cancelButtonLabel }}
Expand All @@ -14,7 +14,7 @@
<button
#closeButton
type="button"
igxButton="flat"
[igxButton]="closeButtonType"
igxRipple
(click)="calendarClose.emit({ owner: this})"
>
Expand Down
4 changes: 3 additions & 1 deletion ...ui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
HostListener,
HostBinding
} from '@angular/core';
import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
import { IgxButtonDirective, IgxButtonType, IgxRippleDirective } from 'igniteui-angular/directives';
import { IgxCalendarComponent } from 'igniteui-angular/calendar';
import { IgxDividerDirective } from 'igniteui-angular/directives';
import { IBaseEventArgs, DateRange, CustomDateRange, PickerInteractionMode, IDateRangePickerResourceStrings, IgxPickerActionsDirective } from 'igniteui-angular/core';
Expand Down Expand Up @@ -56,7 +56,9 @@ export class IgxCalendarContainerComponent {
public resourceStrings!: IDateRangePickerResourceStrings;
public vertical = false;
public closeButtonLabel: string;
public closeButtonType: IgxButtonType = 'flat';
public cancelButtonLabel: string;
public cancelButtonType: IgxButtonType = 'flat';
public todayButtonLabel: string;
public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
public pickerActions: IgxPickerActionsDirective;
Expand Down
9 changes: 8 additions & 1 deletion projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ import {
DateTimeUtil,
IgxPickerActionsDirective,
isDateInRanges,
PickerCalendarOrientation
PickerCalendarOrientation,
THEME_TOKEN,
ThemeToken
} from 'igniteui-angular/core';
import { IgxCalendarContainerComponent } from '../date-picker/calendar-container/calendar-container.component';
import { PickerBaseDirective } from '../date-picker/picker-base.directive';
Expand Down Expand Up @@ -107,6 +109,7 @@ const SingleInputDatesConcatenationString = ' - ';
export class IgxDateRangePickerComponent extends PickerBaseDirective
implements OnChanges, OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
protected platform = inject(PlatformUtil);
private themeToken = inject<ThemeToken>(THEME_TOKEN);
private _injector = inject(Injector);
private _cdr = inject(ChangeDetectorRef);
private _overlayService = inject<IgxOverlayService>(IgxOverlayService);
Expand Down Expand Up @@ -1337,6 +1340,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
componentInstance.mode = this.mode;
componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;
componentInstance.cancelButtonLabel = !this.isDropdown ? this.cancelButtonText : null;
if (!this.isDropdown && this.themeToken.theme === 'indigo') {
componentInstance.closeButtonType = 'contained';
componentInstance.cancelButtonType = 'outlined';
Comment on lines +1343 to +1345
Copy link
Copy Markdown
Contributor Author

@didimmova didimmova May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I set the default button types to 'flat' and the change is only applicable for indigo date-range-picker in dialog mode, so maybe the additional checks are not necessary, also the spec files are written only for the material theme, so we don't need tests for the indigo button types

}
componentInstance.pickerActions = this.pickerActions;
componentInstance.usePredefinedRanges = this.usePredefinedRanges;
componentInstance.customRanges = this.customRanges;
Expand Down
Loading