Use DateRangePicker in dropdown

[agriffard]

I try to use the DateRangePicker in a Bootstrap dropdown.

Would it be possible to have something like a @onclick:stopPropagation="true" when there is an action (select a range of dates, apply, ...) in order to prevent the dropdown from being hidden until I decide it (click on another button)?

[jdtcn]

Hi, I think this is possible, please share a code snippet, I will try to implement it

[agriffard]

https://github.com/[agriffard/DateRangePicker](https://github.com/agriffard/DateRangePicker)

https://github.com/agriffard/DateRangePicker/blob/5f5569a12fde68503e78ef6541052aadf47a9243/src/DateRangePicker/Components/Pages/Home.razor#L15

[jdtcn]

Hi, here is one option of how this can be achieved, I used data-bs-auto-close="false" to prevent dropdown from closing and trigger dropdown close from the OnClosed event. In general, I certainly recommend to abandon bootstrap.js and use native blazor libraries.

@page "/"
@rendermode InteractiveServer
@inject IJSRuntime js

<PickerContainer @ref="CustomContainer" />

<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
       Select range
   </button>
   <ul class="dropdown-menu">
       @if (RenderPicker)
       {
           <DateRangePicker Container="CustomContainer" OnClosed="CloseDropdown" />
       }
   </ul>
</div>

@code {
   PickerContainer? CustomContainer { get; set; }
   bool RenderPicker { get; set; } = false;

   protected override void OnAfterRender(bool firstRender)
   {
       base.OnAfterRender(firstRender);
       RenderPicker = true;
       StateHasChanged();
   }

   private async Task CloseDropdown()
   {
       try
       {
           await js.InvokeVoidAsync("eval", "bootstrap.Dropdown.getInstance(document.querySelector('.dropdown-toggle')).hide()");
       }
       catch (JSException ex)
       {
           Console.WriteLine($"JSInterop Error: {ex.Message}");
       }
   }
}