jdtcn / BlazorDateRangePicker

A Blazor component for choosing date ranges and dates
MIT License
186 stars 34 forks source link

Change month not updating #44

Closed EasyME closed 3 years ago

EasyME commented 3 years ago

Having a problem with datepicker and provide a startdate of month (-1) and it's changing the month in the drop down. settings are AudoAdjustCalendars=true ; inline=true; ShowOnlyOneCalendar=true; SingleDatePicker=true; StartDate="seldate" MaxDate="maxDateLimit" MinDate="minDateLimit"

@Code { DateTime minDateLimit = DateTime.Now.AddMonth(-1); DateTime maxDateLimit = DateTime.Now.AddDays(-1); DateTime seldate = DateTime.Now.AddMonth(-1); }

am I doing something wrong ? to get around the issue I put code on "AfterRender" to reset() then TSartDate = seldate then .leftcalender.ChangeMonth(new DatTimeOffset(seldate) then the same for rightcalender - bare in mind this is a singledate picker with just one calendar inline.

if this is not an issue then any help or example would greatly be appreciated

jdtcn commented 3 years ago

Hi.

By default this picker adjust calendars on first render to make selected date visible. So you need to switch month on the first render, like that:

<DateRangePicker @ref="Picker" AutoAdjustCalendars="true" Inline="true" 
                 ShowOnlyOneCalendar="true" SingleDatePicker="true"
                 @bind-StartDate="seldate" EndDate="seldate" 
                 MaxDate="maxDateLimit" MinDate="minDateLimit" 
                 OnMonthChangedAsync="MonthChangedAsync" />

@code {
    DateRangePicker Picker;
    DateTimeOffset minDateLimit { get; set; } = DateTime.Now.AddMonths(-1);
    DateTimeOffset maxDateLimit { get; set; } = DateTime.Now.AddDays(-1);
    DateTimeOffset? seldate { get; set; } = DateTime.Now.AddMonths(-1);

    bool firstRender = true;
    private Task MonthChangedAsync()
    {
        if (firstRender)
        {
            firstRender = false;
            return Picker.LeftCalendar.ChangeMonth(DateTime.Now);
        }
        return Task.CompletedTask;
    }
}
EasyME commented 3 years ago

Thanks for the sample and direction. I'm able to use the code for adjusting the month - at present I have user functionality that allows them to select three options (same month last year, same quarter last year, previous quarter) each one presents a single calendar back in time (after the selection) is made I have to force the calendar refresh and this breaks the .ChangeMonth() function as it it done as part of the user flow in UI - so, I have to call reset() forcibly after they have chosen one of the selections. would be nice to have ChangeMonth provide the functionality as once I call it with a set date I'm expecting it to reflect the proper date on the UI (given that now without the proper refresh the selected date and ui component displayed are no longer in sync if I don't force the reset) - however I'm good with provide sample -thanks!

jdtcn commented 3 years ago

Can you share your code, please?

EasyME commented 3 years ago

what you provided me works, what I'm saying is that I'm still forced to have to do additional function wrapping around that ChangeMonth() function and that changemonth() should incorporate the first render booleans as it appears doesn't function without it that setting while engaged with user.. if you still need code I will post at your request.

jdtcn commented 3 years ago

Hi, sorry for delay. Have you solved your issue? If not, please share demo app code with this issue reproduction.