Skip to content

[Date Range Picker, Date Picker] Discrepancies in the calendar-related customization options- align with WC #16131

@ddaribo

Description

@ddaribo

The IgxDateRangePicker does not expose any means of customizing the calendar. Additionally, it is always displayed with no header.

  1. In WC IgcDateRangePicker, and in the Angular IgxDatePicker, in dialog mode, the calendar is displayed with a header by default. The IgxDateRangePicker is always displayed without header.
  2. 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 ?):

Image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions