DOCSEARCHbyAlgolia
Submit Docs

BlazorDateRangePicker

repository·master·Indexed 42 days ago

https://github.com/jdtcn/blazordaterangepicker

A Razor Component for Blazor applications that provides a date range picker dropdown. It is a C# port of the JavaScript DateRangePicker and operates without dependencies on jQuery, Moment.js, or Bootstrap. Features include two-way data binding for StartDate and EndDate, custom templates for the picker and buttons, and global configuration via AddDateRangePicker.

Tokens
6K
Snippets
16
Records
18
Agent score
3%

What's inside BlazorDateRangePicker

  1. Configure CSS and JS isolation

    master

    The component uses CSS and JS isolation. You do not need to modify _Host.cshtml or index.html manually, but you must ensure the isolated styles are connected by adding the following link to your HTML head, replacing {ASSEMBLY NAME} with your actual assembly name:

    <link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">

    <link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">

  6. Configure global settings for all pickers

    master

    You can define a global configuration for all DateRangePicker instances in your Startup.cs (or Program.cs in newer Blazor versions) using AddDateRangePicker. You can also create named configurations and apply them to specific instances using the Config property.

    // Global configuration in Startup.cs
services.AddDateRangePicker(config =>
{
    config.Attributes = new Dictionary<string, object>
    {
        { "class", "form-control form-control-sm" }
    };
});

// Named configuration
services.AddDateRangePicker(config => ..., configName: "CustomConfig");

// Applying a named configuration to a component
<DateRangePicker Config="CustomConfig" />

  8. Use Open Iconic SVG Sprites

    master

    The SVG sprite allows you to load all icons in a single request. To use an icon, reference the specific icon ID within the open-iconic.svg sprite using the <use> tag.

    Styling Tips:

    • Sizing: Set equal width and height on the <svg> tag.
    • Coloring: Use the CSS fill property on the <use> tag to change the icon color.
    <svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
    /* Sizing */
.icon {
  width: 16px;
  height: 16px;
}

/* Coloring */
.icon-account-login {
  fill: #f00;
}

  9. Two-way data binding with StartDate and EndDate

    master

    Use @bind-StartDate and @bind-EndDate to synchronize the selected date range with your C# properties.

    @using BlazorDateRangePicker

<DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate" />

@code {
    DateTimeOffset? StartDate { get; set; } = DateTime.Today.AddMonths(-1);
    DateTimeOffset? EndDate { get; set; } = DateTime.Today.AddDays(1).AddTicks(-1);
}

  10. Customize buttons with ButtonsTemplate

    master

    Use ButtonsTemplate to define custom action buttons (e.g., Cancel, Reset, Apply). You can access the picker instance via the context object to call methods like context.ClickApply, context.ClickCancel, or context.Close(). To check the current selection state before applying, use context.TStartDate and context.TEndDate.

    <DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate">
    <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 || context.TEndDate == null)"
            type="button">Apply</button>
    </ButtonsTemplate>
</DateRangePicker>

@code {
    DateTimeOffset? StartDate { get; set; }
    DateTimeOffset? EndDate { get; set; }

    void ResetClick(MouseEventArgs e, DateRangePicker picker)
    {
        StartDate = null;
        EndDate = null;
        // Close the picker
        picker.Close();
        // Fire OnRangeSelectEvent
        picker.OnRangeSelect.InvokeAsync(new DateRange());
    }
}

  11. Customize the Picker with PickerTemplate

    master

    Use the PickerTemplate to replace the default input field with custom markup. The context object provides access to the picker's state. To ensure outside clicks correctly close the picker, you must set the id of your root element to @context.Id and handle the @onclick event using context.Toggle.

    @using BlazorDateRangePicker

<DateRangePicker Culture="@(System.Globalization.CultureInfo.GetCultureInfo("en-US"))">
    <PickerTemplate>
        <div id="@context.Id" @onclick="context.Toggle" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 250px; border: 1px solid #ccc;">
            <i class="oi oi-calendar"></i>&nbsp;
            <span>@context.FormattedRange @(string.IsNullOrEmpty(context.FormattedRange) ? "Choose dates..." : "")</span>
            <i class="oi oi-chevron-bottom float-right"></i>
        </div>
    </PickerTemplate>
</DateRangePicker>