Skip to content

Infragistics Community Forum / Web / Ignite UI for Angular / Change color of weekends on DatePicker

Change color of weekends on DatePicker

New Discussion
User42
User42 asked on May 9, 2019 8:33 AM

Hi,

Is there any way to make the weekend dates on an IgxDatePicker control not be the color grey?  I have a lot of dates disabled which all show up grey but even when I enable a Saturday or Sunday date those dates stay grey and look disabled even though they are selectable.

Here's an example:

Sign In to post a reply

Replies

  • 0
    Andrew Goldenbaum
    Andrew Goldenbaum answered on Apr 29, 2019 9:41 PM

    Hello User42,

    Thank you for your post on this matter. I am currently looking into a way for the IgxDatePicker control’s non-disabled dates to be colored normally. From the screenshot you have provided, though, it appears that most of the dates in your component are greyed out, unless selected. This leads me to believe that you are likely setting the IgxDatePicker up in a different way than I have it locally, and so would it be possible for you to please provide any typescript or HTML setup that you are currently using so I may mimic the scenario you have on my end as well?

    Please let me know if you have any other questions or concerns on this matter.

    • 0
      User42
      User42 answered on May 3, 2019 7:08 PM

      Sure, I'm using the following code to set the disabled dates;

       var endDate: Date = new Date(EndDate);
          endDate.setHours(0, 0, 0, 0);
      
          var startDate = new Date();
          startDate.setHours(0, 0, 0, 0);
          
          endDate.setDate(endDate.getDate() - 1);
          this.datePicker.disabledDates = [
            { type: DateRangeType.Before, dateRange: [startDate] },
            { type: DateRangeType.After, dateRange: [endDate]}
          ]

      The idea is to disable all dates that are before today and later than 1 day before the passed in end date.

      What I was trying to illustrate in my image is that the 27th is enabled according to my logic, and verified enabled by being able to select it but the 20th is disabled, which it should be due to my logic. Every other day is disabled except for the 26th and 27th which is the expected behavior.

      As I stated originally though, the 26th and the 27th are styled exactly the same, and the same as all other disabled dates, even though the 27th is enabled.

      • 0
        Zdravko Kolev
        Zdravko Kolev answered on May 9, 2019 8:33 AM

        Hello,

        The idea behind disabled dates is to have a faded background that indicated inactive state, and the only way to make them distinguishable is by using the $date-disabled-text-color parameter.

        In general it depends on the user configuration how the day elements will look like, and we provide a rich way to do so. I believe you will find this sample helpful. It shows how to set different element colors which makes the day element more distinctive.

  • You must be logged in to reply to this topic.
Discussion created by
Favorites
Replies
Created On
Last Post
Discussion created by
User42
Favorites
0
Replies
3
Created On
May 09, 2019
Last Post
6 years, 10 months ago

Suggested Discussions

Tags

Created by

Created on

May 9, 2019 8:33 AM

Last activity on

Feb 16, 2026 8:47 PM