### Install Blazor Date Range Picker via NuGet

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Use this command in the Package Manager Console to download the library.

```shell
Install-Package BlazorDateRangePicker
```

--------------------------------

### Two-Way Data Binding for Start and End Dates

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Use @bind-StartDate and @bind-EndDate to establish two-way data binding with your DateTimeOffset variables. Initialize these variables to set default selected dates.

```csharp
@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);
}
```

--------------------------------

### DateRange Type Definition

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Defines the structure for a date range, including start and end dates. Start and End properties are in the local timezone. The Start property is the start of a selected day (dateTime.Date). The End property is the end of a selected day (dateTime.Date.AddDays(1).AddTicks(-1)).

```csharp
public class DateRange
{
    public DateTimeOffset Start { get; set; }
    public DateTimeOffset End { get; set; }
}
```

--------------------------------

### Handle Date Range Selection Event

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Implement the OnRangeSelect event handler to be notified when a user selects a date range. The event provides a DateRange object containing Start and End properties.

```csharp
@using BlazorDateRangePicker

<DateRangePicker OnRangeSelect="OnRangeSelect" />

@code {
    public void OnRangeSelect(DateRange range)
    {
        //Use range.Start and range.End here
    }
}
```

--------------------------------

### Including Open Iconic with Foundation

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/Demo.Shared/wwwroot/css/open-iconic/README.md

Link the Foundation-specific stylesheet to integrate Open Iconic with the Foundation framework. Use 'fi-icon-name' classes for icons.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
```

```html
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Global Configuration for Date Range Pickers

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Configure default attributes for all DateRangePicker instances globally in Startup.cs using AddDateRangePicker. You can also define named configurations.

```csharp
#Startup.cs

using BlazorDateRangePicker;

//ConfigureServices
services.AddDateRangePicker(config =>
{
    config.Attributes = new Dictionary<string, object>
    {
        { "class", "form-control form-control-sm" }
    };
});
```

```csharp
services.AddDateRangePicker(config => { ... }, configName: "CustomConfig");

<DateRangePicker Config="CustomConfig" />
```

--------------------------------

### Set MinDate and MaxDate Properties

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Configure the selectable date range by setting the MinDate and MaxDate properties. Use DateTimeOffset.Now for current date references.

```csharp
@using BlazorDateRangePicker

<DateRangePicker MinDate="DateTimeOffset.Now.AddYears(-10)" MaxDate="DateTimeOffset.Now" />
```

--------------------------------

### Custom Buttons Template with Event Handling

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Define custom buttons for the date picker using the ButtonsTemplate. Implement event handlers for actions like Cancel, Reset, and Apply. Use context properties like TStartDate and TEndDate for pre-apply state.

```csharp
<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());
    }
}
```

--------------------------------

### Using Open Iconic Standalone

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/Demo.Shared/wwwroot/css/open-iconic/README.md

Link the default stylesheet for standalone usage of Open Iconic. This method uses the 'oi' class with a 'data-glyph' attribute.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
```

```html
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Include Blazor Component Styles

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Ensure the isolated styles for the component are connected by including this link in your _Host.cshtml or index.html.

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

--------------------------------

### Including Open Iconic with Bootstrap

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/Demo.Shared/wwwroot/css/open-iconic/README.md

Link the Bootstrap-specific stylesheet to use Open Iconic with Bootstrap framework. This enables the use of 'oi' and 'oi-icon-name' classes.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
```

```html
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Displaying Open Iconic SVGs

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/Demo.Shared/wwwroot/css/open-iconic/README.md

Use this method to display individual Open Iconic SVG files. Ensure to include an 'alt' attribute for accessibility.

```html
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
```

--------------------------------

### Custom Picker Markup with Template

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Customize the appearance and behavior of the date picker by using the PickerTemplate. Ensure the root element has id="@context.Id" for proper outside click handling.

```csharp
@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>
```

--------------------------------

### Date Range Picker Properties

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Configuration options for the Blazor Date Range Picker component.

```APIDOC
## Properties

### StartDate
- **Type**: DateTimeOffset?
- **DefaultValue**: null
- **Description**: The beginning date of the initially selected date range.

### EndDate
- **Type**: DateTimeOffset?
- **DefaultValue**: null
- **Description**: The end date of the initially selected date range.

### MinDate
- **Type**: DateTimeOffset?
- **DefaultValue**: null
- **Description**: The earliest date a user may select.

### MaxDate
- **Type**: DateTimeOffset?
- **DefaultValue**: null
- **Description**: The latest date a user may select.

### MinSpan
- **Type**: TimeSpan?
- **DefaultValue**: null
- **Description**: The minimum span between the selected start and end dates.

### MaxSpan
- **Type**: TimeSpan?
- **DefaultValue**: null
- **Description**: The maximum span between the selected start and end dates.

### ShowDropdowns
- **Type**: bool
- **DefaultValue**: true
- **Description**: Show year and month select boxes above calendars to jump to a specific month and year.

### ShowWeekNumbers
- **Type**: bool
- **DefaultValue**: false
- **Description**: Show localized week numbers at the start of each week on the calendars.

### ShowISOWeekNumbers
- **Type**: bool
- **DefaultValue**: false
- **Description**: Show ISO week numbers at the start of each week on the calendars.

### Ranges
- **Type**: Dictionary<string, DateRange>
- **DefaultValue**: null
- **Description**: Set predefined date ranges the user can select from. Each key is the label for the range.

### ShowCustomRangeLabel
- **Type**: bool
- **DefaultValue**: true
- **Description**: Displays "Custom Range" at the end of the list of predefined ranges, when the ranges option is used. This option will be highlighted whenever the current date range selection does not match one of the predefined ranges. Clicking it will display the calendars to select a new range.

### AlwaysShowCalendars
- **Type**: bool
- **DefaultValue**: false
- **Description**: Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range are always shown instead.

### Opens
- **Type**: SideType enum: Left/Right/Center
- **DefaultValue**: Right
- **Description**: Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.

### Drops
- **Type**: DropsType enum: Down/Up
- **DefaultValue**: Down
- **Description**: Whether the picker appears below (default) or above the HTML element it's attached to.

### ButtonClasses
- **Type**: string
- **DefaultValue**: btn btn-sm
- **Description**: CSS class names that will be added to both the apply and cancel buttons.

### ApplyButtonClasses
- **Type**: string
- **DefaultValue**: btn-primary
- **Description**: CSS class names that will be added only to the apply button.

### CancelButtonClasses
- **Type**: string
- **DefaultValue**: btn-default
- **Description**: CSS class names that will be added only to the cancel button.

### Culture
- **Type**: CultureInfo
- **DefaultValue**: CultureInfo.CurrentCulture
- **Description**: Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars.

### SingleDatePicker
- **Type**: bool
- **DefaultValue**: false
- **Description**: Show only a single calendar to choose one date, instead of a range picker with two calendars. The start and end dates provided to your callback will be the same single date chosen.

### AutoApply
- **Type**: bool
- **DefaultValue**: false
- **Description**: Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.

### LinkedCalendars
- **Type**: bool
- **DefaultValue**: false
- **Description**: When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.

### DaysEnabledFunction
- **Type**: Func<DateTimeOffset, bool>
- **DefaultValue**: _ => true
- **Description**: A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.

### DaysEnabledFunctionAsync
- **Type**: Func< DateTimeOffset, Task< bool>>
- **DefaultValue**: _ => true
- **Description**: Same as DaysEnabledFunction but with async support.

### CustomDateFunction
- **Type**: Func<DateTimeOffset, object>
- **DefaultValue**: _ => true
- **Description**: A function to which each date from the calendars is passed before they are displayed, may return a bool value indicates whether the string will be added to the cell, or a string with CSS class name to add to that date's calendar cell. May return string, bool, Task<string>, Task<bool>

### CustomDateClass
- **Type**: string
- **DefaultValue**: string.Empty
- **Description**: String of CSS class name to apply to that custom date's calendar cell.

### ApplyLabel
- **Type**: string
- **DefaultValue**: "Apply"
- **Description**: Apply button text.

### CancelLabel
- **Type**: string
- **DefaultValue**: "Cancel"
- **Description**: Cancel button text.

### CustomRangeLabel
- **Type**: string
- **DefaultValue**: "Custom range"
- **Description**: Custom range label at the end of the list of predefined ranges.

### DateFormat
- **Type**: string
- **DefaultValue**: CultureInfo.DateTimeFormat.ShortDatePattern
- **Description**: Enforces the desired format for formatting the date, ignoring the settings of the current CultureInfo.

### Config
- **Type**: string
- **DefaultValue**: null
- **Description**: Name of the named configuration to use with this picker instance.

### ShowOnlyOneCalendar
- **Type**: bool
- **DefaultValue**: false
- **Description**: Show only one calendar in the picker instead of two calendars.

### CloseOnOutsideClick
- **Type**: bool
- **DefaultValue**: true
- **Description**: Whether the picker should close on outside click.

### AutoAdjustCalendars
- **Type**: bool
- **DefaultValue**: true
- **Description**: Whether the picker should pick the months based on selected range.

### PickerTemplate
- **Type**: RenderFragment<DateRangePicker>
- **DefaultValue**: null
- **Description**: Custom input field template

### ButtonsTemplate
- **Type**: RenderFragment<DateRangePicker>
- **DefaultValue**: null
- **Description**: Custom picker buttons template

### DayTemplate
- **Type**: RenderFragment<CalendarItem>
- **DefaultValue**: null
- **Description**: Custom day cell template

### Inline
- **Type**: bool
- **DefaultValue**: false
- **Description**: Inline mode if true.
```

--------------------------------

### Sizing Icons with CSS

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/Demo.Shared/wwwroot/css/open-iconic/README.md

Apply basic CSS to set the dimensions for icons sourced from the SVG sprite. All icons are designed in a square format.

```css
.icon {
  width: 16px;
  height: 16px;
}
```

--------------------------------

### Using Open Iconic SVG Sprite

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/Demo.Shared/wwwroot/css/open-iconic/README.md

Integrate icons from the SVG sprite for efficient loading. Add a general class to the SVG and a unique class to the 'use' tag for styling.

```html
<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
```

--------------------------------

### Basic Blazor Date Range Picker Usage

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Include the DateRangePicker component in your Blazor markup to render a basic date range input.

```csharp
@using BlazorDateRangePicker

<DateRangePicker/>
```

--------------------------------

### Coloring Icons with CSS

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/Demo.Shared/wwwroot/css/open-iconic/README.md

Set the 'fill' property on the specific icon class to change the color of icons from the SVG sprite.

```css
.icon-account-login {
  fill: #f00;
}
```

--------------------------------

### Pass Tag Attributes to Input Field

Source: https://github.com/jdtcn/blazordaterangepicker/blob/master/README.md

Attributes like 'class' and 'placeholder' applied to the DateRangePicker component will be passed directly to the underlying input field.

```csharp
@using BlazorDateRangePicker

<DateRangePicker class="form-control form-control-sm" placeholder="Select dates..." />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.