Strange DaysEnabledFunctionAsync issue

[Lesterdor]

Hey, I would like to be able to select only Saturdays that are not holidays:

SaturdayPanel.razor

                <DatePicker
                    SingleDatePicker="true"
                    StartDate="SelectedSaturday"
                    StartDateChanged="DateChanged"
                    DaysEnabledFunctionAsync="OnlySaturdayEnabled"
                    DayCellRenderer="DayCellRenderer"/>

SaturdayPanel.razor.cs

        protected Task<bool> OnlySaturdayEnabled(DateTimeOffset day)
        {
            return Task.FromResult(day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date));
        }

        protected object DayCellRenderer(DateTimeOffset day)
        {
            return day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date)
                ? "has-text-green"
                :  "has-text-red";
        }

Everything works as expected except the 4th of every month. This is displayed in red and cannot be clicked on. However, this is not crossed out like the rest of the non-selectable data:

Thank you in advance.

[jdtcn]

Hi,

I can't reproduce the issue with this setup:

<style>
    .has-text-green{
        color: green !important;
    }
    .has-text-red{
        color:red !important;
    }
</style>

<DateRangePicker SingleDatePicker="true"
            StartDate="SelectedSaturday"
            StartDateChanged="DateChanged"
            DaysEnabledFunction="OnlySaturdayEnabled"
            CustomDateFunction="DayCellRenderer"
 />

@code {
    public DateTimeOffset? SelectedSaturday { get; set; }

    private void DateChanged(DateTimeOffset? date)
    {
        SelectedSaturday = date;
    }

    private List<DateTimeOffset> Holidays { get; set; } = new List<DateTimeOffset> { DateTime.Parse("04.10.2020"), DateTime.Parse("03.10.2020") };

    protected bool OnlySaturdayEnabled(DateTimeOffset day)
    {
        return day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date);
    }

    protected object DayCellRenderer(DateTimeOffset day)
    {
        return day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date)
            ? "has-text-green"
            : "has-text-red";
    }
}

However, I've noticed that your library implementation is slightly different from my DateRangePicker, for example, there is no DayCellRenderer property in this library. Are you using some fork?

Either way, I think the problem must be with css styles maybe in combination with Holidays calculation. Can you share full code please?

[Lesterdor]

Hey @jdtcn ,

Thank you for your quick response and your efforts. I use your project. However, I've wrapped the component in a different one, hence the name difference.

Attached is a test project where this behavior occurs. So that you don't have to download everything, I'll post the relevant part:

Index.razor

@page "/"
@using BlazorDateRangePicker

<DateRangePicker SingleDatePicker="true"
            StartDate="SelectedSaturday"
            StartDateChanged="DateChanged"
            DaysEnabledFunction="OnlySaturdayEnabled"
            CustomDateFunction="DayCellRenderer"
 />

Index.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;

namespace DatePickerRangePicker.Pages
{
    public partial class Index
    {
        public DateTimeOffset? SelectedSaturday { get; set; } = DateTime.Now;

        private void DateChanged(DateTimeOffset? date)
        {
            SelectedSaturday = date;
        }

        private List<DateTime> Holidays { get; set; } = new List<DateTime> 
        {
            new DateTime(2020, 1, 1),
            new DateTime(2020, 4, 10),
            new DateTime(2020, 4, 13),
            new DateTime(2020, 5, 1),
            new DateTime(2020, 5, 21),
            new DateTime(2020, 6, 1),
            new DateTime(2020, 10, 3),
            new DateTime(2020, 10, 31),
            new DateTime(2020, 12, 25),
            new DateTime(2020, 12, 26)
        };

        protected bool OnlySaturdayEnabled(DateTimeOffset day)
        {
            return day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date);
        }

        protected object DayCellRenderer(DateTimeOffset day)
        {
            return day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date)
                ? "has-text-green"
                : "has-text-red";
        }
    }
}

Thank you for your commitment and a merry, healthy Christmas

DatePickerRangePicker.zip

[jdtcn]

You will laugh, but the issue is with the font. "4" is crossed out like all other numbers, we just can't see it (see "14" for example, same thing there). I recommend to just overwrite this text-decoration: line-through style like that:

.daterangepicker td.disabled, .daterangepicker option.disabled {
    text-decoration: none;
}

Or you can change the font.

[Lesterdor]

Hey @jdtcn, thank you for your help, time and investigation. This is an extremely curious 'issue' indeed. Good catch eagle eye ;)