ButtonsTemplate with SingleDatePicker

[dougallison]

I'm using the DateRangePicker (version 3.6.0) with SingleDatePicker = true. I notice the ButtonsTemplate are hidden in this scenario unless I add the TimePicker attribute and set it to true.

For example, this does not show the ButtonsTemplate:

<DateRangePicker ResetOnClear="true"
                 SingleDatePicker="true"
                 ShowDropdowns="true"
                 CloseOnOutsideClick="true"
                 DateFormat="@($"MM/dd/yyyy")"
                 TimePicker="false"
                 @bind-StartDate="@SearchCriteria.PickupDate"
                 class="form-control"
                 @ref="PickupDatePicker">
    <ButtonsTemplate>
        <button class="cancelBtn btn btn-sm btn-default"
                @onclick="@context.ClickCancel" type="button">
            Cancel
        </button>
        <button class="cancelBtn btn btn-sm btn-default"
                @onclick="@(e => ResetClick(e, context))" type="button">
            Reset
        </button>
        <button class="applyBtn btn btn-sm btn-primary" @onclick="@context.ClickApply"
                disabled="@(context.TStartDate == null)"
                type="button">
            Apply
        </button>
    </ButtonsTemplate>
</DateRangePicker>

In the DevTools, I can see the div for the buttons:

<div class="drp-buttons">
...
</div>

And looking at the Styles applied I see:

.daterangepicker.auto-apply .drp-buttons {
    display: none;
}

---

This code does show the buttons, and the only difference is the application of TimePicker="true":

<DateRangePicker ResetOnClear="true"
                 SingleDatePicker="true"
                 ShowDropdowns="true"
                 CloseOnOutsideClick="true"
                 DateFormat="@($"MM/dd/yyyy")"
                 TimePicker="true"
                 @bind-StartDate="@SearchCriteria.PickupDate"
                 class="form-control"
                 @ref="PickupDatePicker">
    <ButtonsTemplate>
        <button class="cancelBtn btn btn-sm btn-default"
                @onclick="@context.ClickCancel" type="button">
            Cancel
        </button>
        <button class="cancelBtn btn btn-sm btn-default"
                @onclick="@(e => ResetClick(e, context))" type="button">
            Reset
        </button>
        <button class="applyBtn btn btn-sm btn-primary" @onclick="@context.ClickApply"
                disabled="@(context.TStartDate == null)"
                type="button">
            Apply
        </button>
    </ButtonsTemplate>
</DateRangePicker>

And the corresponding style:

.daterangepicker.show-calendar .drp-buttons {
    display: block;
}

Is it possible to have the buttons show without requiring TimePicker="true"?

[jdtcn]

Hi,

Yes, it's possible. Just add AutoApply="false" to the picker.

[dougallison]

Thank you, that works! And thanks for the great library!