In version 2.7 context.StartDate and context.EndDate are null until I Accept

[horaciodiez]

Hi! I am using context.StartDate and EndDate in the PickerTemplate to make some calculations before I accept the range. In the previous version it was working like charm but in this one I get null for both values the first time and the "old values" the following. The only way to get the "new" values is clicking Accept. Here is the (now not working) working sample

<PickerTemplate>
    <div id="@context.ParentId" @onclick="context.Toggle" style="background: #fff; cursor: pointer; padding: .45rem 10px; border: 1px solid #ccc; border-radius: 5px;">
        <i class="fa fa-calendar"></i>&nbsp;
        @if (context.StartDate == null && context.EndDate == null)
        {
            <span>Seleccione Fechas...</span>
        }
        else if (context.StartDate != null && context.EndDate == null)
        {
            <span>@context.StartDate.Value.ToString("dd/MM/yyyy")</span>
        }
        else
        {
            <span>
                @context.FormattedRange @(StartDateSelected != null && EndDateSelected != null &&
                context.StartDate.Value == StartDateSelected.Value && context.EndDate.Value == EndDateSelected.Value ? noches :
                 $" - ({(context.EndDate.Value.Subtract(context.StartDate.Value).Days).ToString()} noches)"  )
            </span>
    }
        <i class="fa fa-chevron-down float-right"></i>
    </div>
</PickerTemplate>

As you can see, it´s based on your sample. Am i doing something wrong?

Thank you Regards H

[jdtcn]

Hi.

I've had a problem with @bind-* property bindings, thus in 2.7.0 I've had to make additional properties TStartDate and TEndDate, so that its values not override by bindings.

Accordingly to that, new markup should look like this:

<PickerTemplate>
    <div id="@context.ParentId" @onclick="context.Toggle" style="background: #fff; cursor: pointer; padding: .45rem 10px; border: 1px solid #ccc; border-radius: 5px;">
        <i class="fa fa-calendar"></i>&nbsp;
        @if (context.TStartDate == null && context.TEndDate == null)
        {
            <span>Seleccione Fechas...</span>
        }
        else if (context.TStartDate != null && context.TEndDate == null)
        {
            if (context.HoverDate > context.TStartDate)
            {
                @($"{context.TStartDate.Value.ToString(context.DateFormat)} - {context.HoverDate.Value.ToString(context.DateFormat)}")
                @($" - ({(context.HoverDate.Value.Subtract(context.TStartDate.Value).Days).ToString()} noches)")
            }
            else
            {
                <span>@context.TStartDate.Value.ToString("dd/MM/yyyy")</span>
            }
        }
        else
        {
            <span>
                @context.FormattedRange @($" - ({(context.TEndDate.Value.Subtract(context.TStartDate.Value).Days).ToString()} noches)")
            </span>
        }
        <i class="fa fa-chevron-down float-right"></i>
    </div>
</PickerTemplate>

Also here, I added HoverDate property to illustrate how to show your calculations on hover before a user clicks on an end date. TStartDate, TEndDate, HoverDate made public in 2.8.0

[horaciodiez]

Thank you very much! It works perfectly and it is beautiful.