DotVVM control for bootstrap-daterangepicker
$ dotnet add package DotVVM.BootstrapDateRangePickerThis is a DotVVM control that wraps the Bootstrap Daterangepicker jQuery plugin.
You can install the control from NuGet:
Install-Package DotVVM.Bootstrap.Daterangepicker
or using the dotnet command line:
dotnet add package DotVVM.Bootstrap.Daterangepicker
First, you need to include registration of the control in your DotvvmStartup.cs file:
private void ConfigureControls(DotvvmConfiguration config, string applicationPath)
{
config.AddDateRangePicker();
}
Then, you can use the DateRangePicker control in your DotHTML file:
<cc:DateRangePicker Value="{value: DateRange}"
Ranges="{resource: Ranges}"
ApplyLabel="OK"
CancelLabel="Storno"
CustomRangeLabel="Vlastn�"
class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><span class="fas fa-calendar"></span></span>
</div>
<span class="form-control" Visible="{value: DateRange.HasValue && !DateRange.HasSelectedRange}">
<dot:Literal Text="{value: DateRange.Start}" FormatString="d. M. yyyy">
</dot:Literal>
<span Visible="{value: !DateRange.IsOneDay}">
<span class="separator">-</span>
<dot:Literal Text="{value: DateRange.End}" FormatString="d. M. yyyy">
</dot:Literal>
</span>
</span>
<span class="form-control" Visible="{value: DateRange.HasValue && DateRange.HasSelectedRange}">
<dot:Literal Text="{value: DateRange.SelectedRange.Label}">
</dot:Literal>
</span>
<div class="input-group-append" Visible="{value: DateRange.HasValue}">
<dot:Button Click="{command: ClearDateRange()}"
ButtonTagName="button"
class="input-group-text">
<span class="fas fa-times"></span>
</dot:Button>
</div>
<span class="form-control text-muted" IncludeInPage="{value: !DateRange.HasValue}">
Choose date...
</span>
</cc:DateRangePicker>
The DateRange and Ranges properties should be defined in your viewmodel:
public DateRangeValue DateRange { get; set; } = new();
public List<DateRange> Ranges { get; set; } = new List<DateRange>()
{
new("today", "Today", DateTime.Today),
new("yesterday", "Yesterday", DateTime.Today.AddDays(-1)),
new("last7days", "Last 7 days", DateTime.Today.AddDays(-7)),
new("last30days", "Last 30 days", DateTime.Today.AddDays(-30)),
new("thismonth", "This month", new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1), DateTime.Today),
new("lastmonth", "Last month", new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1).AddMonths(-1), new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1).AddDays(-1))
};This project is licensed under the MIT License - see the LICENSE file for details.