Home
Components
Date Range Picker

Date Range Picker

MokaDateRangePicker provides a dual-date input for selecting a start and end date. Each date opens a calendar dropdown. Ideal for filtering, booking, and reporting scenarios.

Parameters

Name	Type	Default	Description
`StartDate`	`DateTime?`	`null`	The selected start date (two-way bindable)
`EndDate`	`DateTime?`	`null`	The selected end date (two-way bindable)
`MinDate`	`DateTime?`	`null`	Earliest selectable date
`MaxDate`	`DateTime?`	`null`	Latest selectable date
`Label`	`string?`	`null`	Field label
`Placeholder`	`string?`	`null`	Placeholder text when no dates are selected
`Format`	`string`	`"yyyy-MM-dd"`	Date display format
`Disabled`	`bool`	`false`	Disables the input
`Size`	`MokaSize`	`Md`	Input size
`Class`	`string?`	--	Additional CSS classes
`Style`	`string?`	--	Additional inline styles

Basic Date Range

<MokaDateRangePicker @bind-StartDate="_start" @bind-EndDate="_end" Label="Date Range" />

@code {
    private DateTime? _start = DateTime.Today;
    private DateTime? _end = DateTime.Today.AddDays(7);
}

[CS1503] /Preview.razor(1,39): Argument 1: cannot convert from 'System.DateTime?' to 'System.DateOnly?' [CS1503] Preview.razor(155,291): Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime?>' to 'Microsoft.AspNetCore.Components.EventCallback' [CS1503] /Preview.razor(1,62): Argument 1: cannot convert from 'System.DateTime?' to 'System.DateOnly?' [CS1503] Preview.razor(165,289): Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime?>' to 'Microsoft.AspNetCore.Components.EventCallback'

With Min/Max Constraints

<MokaDateRangePicker @bind-StartDate="_start"
                     @bind-EndDate="_end"
                     MinDate="DateTime.Today.AddDays(-30)"
                     MaxDate="DateTime.Today.AddDays(90)"
                     Label="Booking Window" />

@code {
    private DateTime? _start;
    private DateTime? _end;
}

[CS1503] /Preview.razor(3,31): Argument 1: cannot convert from 'System.DateTime' to 'System.DateOnly?' [CS1503] /Preview.razor(4,31): Argument 1: cannot convert from 'System.DateTime' to 'System.DateOnly?' [CS1503] /Preview.razor(1,39): Argument 1: cannot convert from 'System.DateTime?' to 'System.DateOnly?' [CS1503] Preview.razor(173,291): Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime?>' to 'Microsoft.AspNetCore.Components.EventCallback' [CS1503] /Preview.razor(2,37): Argument 1: cannot convert from 'System.DateTime?' to 'System.DateOnly?' [CS1503] Preview.razor(183,289): Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime?>' to 'Microsoft.AspNetCore.Components.EventCallback'

Labeled with Custom Format

<MokaDateRangePicker @bind-StartDate="_start"
                     @bind-EndDate="_end"
                     Label="Report Period"
                     Format="dd/MM/yyyy"
                     Placeholder="Select dates..." />

@code {
    private DateTime? _start;
    private DateTime? _end;
}

[CS1503] /Preview.razor(1,39): Argument 1: cannot convert from 'System.DateTime?' to 'System.DateOnly?' [CS1503] Preview.razor(157,291): Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime?>' to 'Microsoft.AspNetCore.Components.EventCallback' [CS1503] /Preview.razor(2,37): Argument 1: cannot convert from 'System.DateTime?' to 'System.DateOnly?' [CS1503] Preview.razor(167,289): Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime?>' to 'Microsoft.AspNetCore.Components.EventCallback'

Last updated: 2026-04-11