-
Notifications
You must be signed in to change notification settings - Fork 159
Closed
Labels
📈 enhancement📅 date-picker📅 date-range-picker✅ status: resolvedApplies to issues that have pending PRs resolving them, or PRs that have already merged.Applies to issues that have pending PRs resolving them, or PRs that have already merged.
Description
The IgxDateRangePicker
does not expose any means of customizing the calendar. Additionally, it is always displayed with no header.
- In WC
IgcDateRangePicker
, and in the AngularIgxDatePicker
, indialog
mode, the calendar is displayed with a header by default. TheIgxDateRangePicker
is always displayed without header. - In WC
IgcDateRangePicker
exposes the ability to customize the calendar through these props and these about disabled & special dates also.
The below table compares the different options:
WC DP & DRP | Angular DatePicker | Angular DateRangePicker | Description |
---|---|---|---|
headerOrientation |
headerOrientation |
- | Specifies the orientation of the calendar header - applicable in dialog mode |
orientation |
- | - | Specifies the orientation of the days views in the calendar |
hideHeader |
the igxCalendarHeader template is exposed, however, leaving it empty does not hide the header -> no means to achieve this |
- | Hides the header - applicable in dialog mode |
slot[name='title'] |
the igxCalendarHeaderTitle template content targets this |
- | Replaces the default current date/range text in the calendar header. Applicable only in dialog mode. |
slot[name='header-date'] |
the igxCalendarHeader template content targets this |
- | Replaces the calendar header content. Applicable only in dialog mode. |
- | the igxCalendarSubheader template |
- | Renders a subheader text in the calendar; By default this is the area, where months and years navigation buttons are placed |
visibleMonths |
displayMonthsCount |
displayMonthsCount |
Sets the number of months in the calendar picker. However the WC one is clamped to at most two, while in Angular >2 are allowed |
activeDate |
- | - | Sets the activeDate of the calendar |
disabledDates |
disabledDates |
- | Sets disabled dates in the calendar |
specialDates |
specialDates |
- | Sets special dates in the calendar |
weekstart |
weekStart |
weekStart |
self-decriptive |
showWeekNumbers |
showWeekNumbers |
showWeekNumbers |
self-decriptive |
hideOutsideDays |
hideOutsideDays |
hideOutsideDays |
self-decriptive |
keepOpenOnOutsideClick |
overlaySettings: keepOpenOnOutsideClick | overlaySettings: keepOpenOnOutsideClick | self-decriptive |
keepOpenOnSelect |
- | - | In Angular, these type of props are related to the overlay service, so nothing to be done there for the moment |
The currently exposed calendar templates for the IgxDatePicker
(note: they are currently not part of the IGX_DATE_PICKER_DIRECTIVES
and have to be additionally imported - IgxCalendarHeaderTemplateDirective
, IgxCalendarSubheaderTemplateDirective
?):

Metadata
Metadata
Assignees
Labels
📈 enhancement📅 date-picker📅 date-range-picker✅ status: resolvedApplies to issues that have pending PRs resolving them, or PRs that have already merged.Applies to issues that have pending PRs resolving them, or PRs that have already merged.