{\n" +
" new DateTime(leftMonth.Year, leftMonth.Month, leftMonth.Month),\n" +
" new DateTime(rightMonth.Year, rightMonth.Month, rightMonth.Month)\n" +
" };\n" +
" }\n" +
"}";
}
================================================
FILE: Demo.Shared/Pages/Index.razor
================================================
@page "/"
View on GitHub
Date Range Picker
Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, an inline mode, customizable picker layout, and predefined date ranges.
Quick start
To add the picker to your project download library from NuGet in the NuGet Package Manager, or by executing the following command in the Package Manager Console:
CSS
Then Copy-paste the stylesheet
<link>
into your <head>
to load CSS. For complex implementations, custom CSS may be necessary.
JS
This library require the use of JavaScript for popup positioning and outside click handling. Place the following
<script>
near the end of your _Host.cshtml (or index.html for Blazor WebAssembly) pages, right before the closing
</body>.
Using directive
Add this line to the page where you want to use the picker. If you're using the picker on many pages add this line to _Imports.razor.
Use the component
Then attach a date range picker to whatever page you want.
You can customize Date Range Picker with options,
and get notified when the user interacts with picker by subscribing to events.
@code {
private string Css = "";
private string Js = "";
private string Import = "@using BlazorDateRangePicker";
}
================================================
FILE: Demo.Shared/Pages/Inline.razor
================================================
@page "/inline"
@code {
private string ExampleText = "";
}
================================================
FILE: Demo.Shared/Pages/Licence.razor
================================================
Licence
The MIT License (MIT)
Copyright (c) @DateTime.Now.Year Sergey Zaikin
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: Demo.Shared/Pages/Limits.razor
================================================
@page "/limits"
View on GitHub
Limiting the selectable date range
Use these properties to limit selectable date range
| Property |
Type |
Description |
MinDate |
DateTimeOffset? |
The earliest date a user may select. |
MaxDate |
DateTimeOffset? |
The latest date a user may select. |
MinSpan |
TimeSpan? |
The minimum span between the selected start and end dates. |
MaxSpan |
TimeSpan? |
The maximum span between the selected start and end dates. |
@code {
private string ExampleText =
"";
}
================================================
FILE: Demo.Shared/Pages/Localization.razor
================================================
@page "/localization"
Use
ApplyLabel,
CancelLabel and
CustomRangeLabel
to change picker labels. Alternatively one can use custom
ButtonsTemplate.
Use
Culture
property to set picker culture other than CurrentUICulture.
It's convenient to set these properties application-wide in one place:
@code {
private string ExampleText =
"\n" +
" ApplyLabel=\"Appliquer\"\n" +
" CancelLabel=\"Annuler\"\n" +
" CustomRangeLabel=\"Ma gamme personnalisée\" />";
private string ExampleConfig =
"#Startup.cs\n\n" +
"using BlazorDateRangePicker;\n\n" +
"//ConfigureServices\n" +
"services.AddDateRangePicker(config =>\n" +
"{\n" +
" config.ApplyLabel = \"My Apply Label\";\n" +
" ...\n" +
"});";
}
================================================
FILE: Demo.Shared/Pages/Positioning.razor
================================================
@page "/positioning"
View on GitHub
Popup alignment
The picker can be aligned to the left, to the right (default), or centered under the HTML element it's attached to
Popup direction
Whether the picker appears below (default) or above the HTML element it's attached to
@code {
private string ExampleTextLeft = "";
private string ExampleTextCenter = "";
private string ExampleTextRight = "";
private string ExampleTextUp = "";
}
================================================
FILE: Demo.Shared/Pages/PredefinedRanges.razor
================================================
@page "/predefinedRanges"
View on GitHub
Predefined Date Ranges
@code{
Dictionary DateRanges => new Dictionary {
{ "This month", new DateRange
{
Start = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1),
End = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1).AddMonths(1).AddTicks(-1)
}
} ,
{ "Previous month" , new DateRange
{
Start = new DateTime(DateTime.Now.AddMonths(-1).Year, DateTime.Now.AddMonths(-1).Month, 1),
End = new DateTime(DateTime.Now.AddMonths(-1).Year, DateTime.Now.AddMonths(-1).Month, 1).AddMonths(1).AddTicks(-1)
}
}
};
private string ExampleText =
"\n\n" +
"@code { \n Dictionary DateRanges => new Dictionary {\n" +
" { \"This month\", new DateRange\n" +
" {\n" +
" Start = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1),\n" +
" End = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1).AddMonths(1).AddTicks(-1)\n" +
" }\n" +
" }, ...\n" +
" };\n }\n}";
}
================================================
FILE: Demo.Shared/Pages/Single.razor
================================================
@page "/single"
View on GitHub
Single Date Picker
@code {
private string ExampleText = "";
}
================================================
FILE: Demo.Shared/Pages/Time.razor
================================================
@page "/time"
@using System.Globalization
TimePicker 12 Hour
TimePicker 24 Hour
TimePicker minutes increment
TimePicker with seconds
Initial StartTime & EndTime
Initial StartTime & EndTime set by StartDate & EndDate
Single picker with time
TimeEnabled function
@code {
private string DateFormat => CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
private TimeSpan RundStartTime = TimeSpan.FromHours(2).Add(TimeSpan.FromMinutes(15));
private TimeSpan RoundEndTime = TimeSpan.FromHours(15).Add(TimeSpan.FromMinutes(45));
private TimeSpan StartTime = TimeSpan.FromHours(8);
private TimeSpan EndTime = TimeSpan.FromHours(11);
private DateTimeOffset? InitialStartDate { get; set; } = DateTime.Now.AddDays(-1).Date.Add(TimeSpan.FromHours(2));
private DateTimeOffset? InitialEndDate { get; set; } = DateTime.Now.AddDays(1).Date.Add(TimeSpan.FromHours(15));
private DateTimeOffset? RoundStartDate { get; set; }
private DateTimeOffset? RoundEndDate { get; set; }
private void RoundOnRangeSelect(DateRange range)
{
RoundStartDate = range.Start.Date.Add(TimeSpan.FromHours(range.Start.Hour).Add(TimeSpan.FromMinutes((range.Start.Minute / 15) * 15)));
RoundEndDate = range.End.Date.Add(TimeSpan.FromHours(range.End.Hour).Add(TimeSpan.FromMinutes((range.End.Minute / 15) * 15)));
}
private Task TimeEnabledFunction(DateTimeOffset? day)
{
var res = new TimeSettings
{
Hours = day?.Day % 2 == 0
? new int[] { 7, 8, 9, 10, 11, 12 }
: new int[] { 8, 9, 10, 11 },
Minutes = new int[] { 0, 15, 30, 45 },
Seconds = new int[] { 0, 60 }
};
return Task.FromResult(res);
}
private string ExampleText1 = "";
private string ExampleText2 = "";
private string ExampleText3 = "";
private string ExampleText4 = "";
private string ExampleText5 = "";
private string ExampleText6 = "";
private string ExampleText7 = "";
private string ExampleText8 = "\n" +
@"private Task TimeEnabledFunction(DateTimeOffset? day)\n
{
var res = new TimeSettings
{
Hours = day?.Day % 2 == 0
? new int[] { 8, 9, 10, 11 },
: new int[] { 7, 8, 9, 10, 11, 12 }
Minutes = new int[] { 0, 15, 30, 45 },
Seconds = new int[] { 0, 60 }
};
return Task.FromResult(res);
}";
}
================================================
FILE: Demo.Shared/Shared/MainLayout.razor
================================================
@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeAsync