Having a problem with datepicker and provide a startdate of month (-1) and it's changing the month in the drop down.
settings are AudoAdjustCalendars=true ; inline=true; ShowOnlyOneCalendar=true; SingleDatePicker=true; StartDate="seldate" MaxDate="maxDateLimit" MinDate="minDateLimit"

@code
{
DateTime minDateLimit = DateTime.Now.AddMonth(-1);
DateTime maxDateLimit = DateTime.Now.AddDays(-1);
DateTime seldate = DateTime.Now.AddMonth(-1);
}

am I doing something wrong ?
to get around the issue I put code on "AfterRender" to reset() then TSartDate = seldate then .leftcalender.ChangeMonth(new DatTimeOffset(seldate) then the same for rightcalender - bare in mind this is a singledate picker with just one calendar inline.

if this is not an issue then any help or example would greatly be appreciated

It is possible to disable weekends? As in, not shown, or can not be selected.

What I would like to achieve is:
The user picks a 3-week vacation, but of course, the weekends should not be included in the range.
So it would be good to be able to disable weekends so they can not be selected.
I know that I most likely have to still make a method to calculate the correct days unless the component can already extract the disabled weekends from the total amount of selected days.

Thank you!

Hi
Can we select time as well?

thanks

I found an issue with the calendar popup. When clicking on the field, the calendar open up in the top left corner of the page and won't disappear until you select a date.

It happens when 'DateRangePicker' is used inside the EditForm component. I've created a project to replicate the issue.

WebApplicationTest.zip

+1 for this.

One thing I thought would be to use the type="search" rather than type="text". You then get the nice little clear button in the textbox by default. However this does cause the popup for the date picker and does not reset any bound values.

Originally posted by @leninator in #17 (comment)

I'd like to use the left calendar for my start range and the right calendar for my end range. I set the start/end dates to the 1st and last day of a month. Both dates highlight on the same calendar.

Hi,

I would like to use this component in my app however, I can't make it works. The input field is displayed but the calendar doesn't pop when clicking on the field. The app is not a blazor app but a ASP.NET Core WebApp using razor pages & razor components.

Also the doc on github says that the css and script files should be in the head section but the doc on the website says "near the end of your _Host.cshtml (or index.html for Blazor WebAssembly) pages, right before the closing " I've tried both without success. The issue seems to be with clickAndPositionHandler.js

It works well in my other app (Blazor app web assembly). Any idea why it's not working? Thanks

Enables acquiring date without writing an event handler method for OnRangeSelect

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#chained-bind

Relevant example for this project:

<input @oninput="OnValueChanged" value="@Value" />

<p>
    Child: @FirstWord + @SecondWord
</p>


@code {
    string Value { get; set; }

    [Parameter]
    public string FirstWord { set; get; }

    [Parameter]
    public EventCallback<string> FirstWordChanged { set; get; }

    [Parameter]
    public string SecondWord { set; get; }

    [Parameter]
    public EventCallback<string> SecondWordChanged { set; get; }

    private async Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value?.ToString();
        if (Value == null)
        {
            return;
        }

        var words = Value.Split(" ", StringSplitOptions.RemoveEmptyEntries);
        FirstWord = words.FirstOrDefault();
        await FirstWordChanged.InvokeAsync(FirstWord);
        SecondWord = words.Skip(1).FirstOrDefault();
        await SecondWordChanged.InvokeAsync(SecondWord);
    }
}

Example simplified and designed for this project.

For now, let's pretend that Value is acquired when user selected the value on the DatePicker. This is invisible outside the component (internal stuff).

Now, pretend Start and End parameters are FirstWord and SecondWord. By registering and calling the event callback in the component, user can directly bind into the values instead of relying on OnRangeSelect event:

<TestInput @bind-FirstWord="Word1" @bind-SecondWord="Word2"></TestInput>
<p>
    Parent: @Word1 + @Word2
</p>

@code {
    string Word1 { set; get; }

    string Word2 { set; get; }
}

When above example is implemented into the project, the expected result should be something like this:

<DateRangePicker @bind-Start="MyVariable1" @bind-End="MyVariable2"></TestInput>
@code {
    DateTimeOffset MyVariable1 { set; get; }

    DateTimeOffset MyVariable2 { set; get; }
}

I want to use the DateRangePicker to save the selected range dates into database. It works perfect when I add a new item lets say a Product, but when I edit one ( Go to a new page /Edit?ProductId=1) the second calendar displays the same Month.

I am missing something ?

My Code:
` <DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate" Culture="@(System.Globalization.CultureInfo.GetCultureInfo("ro-RO"))" ApplyLabel="@_SharedLocalizer["Apply"]" CancelLabel="@_SharedLocalizer["Cancel"]">

@code {
DateTimeOffset? StartDate { get; set; } = DateTime.Today.AddMonths(-1);
DateTimeOffset? EndDate { get; set; } = DateTime.Today.AddDays(1).AddTicks(-1);
}
protected override async Task OnInitializedAsync()
{ ....
var item = await _Service.GetAtributeValueByID(AtributeValueID.Value);
if (Item.FromDate.HasValue)
{
StartDate = Item.FromDate;
}
if (Item.ToDate.HasValue)
{
EndDate = Item.ToDate;
}
}`

Hello,

I am having an issue with the calendar's position when I am using this date range picker inside another component which is a popover/dialog (e.g. bootstrap popovers). The calculated position is relative to the viewport but the calendar itself is relative to the popover, so the calendar shows up at the far right rather than directly below in the input box.

To get around this issue, I have to also pass in the popover so that I can calculate its position,

var wrapperElementRect = wrapperElement.getBoundingClientRect();

together with

var elementRect = element.getBoundingClientRect();

I can then find the difference, and use it to get the relative top/right/left, and call setStylesOnElement to set the inline style on it.

Do you think that I can address this issue without making this custom change?
Thank you

markup:
<DateRangePicker @bind-StartDate="Data.Filter.StartDate" @bind-EndDate="Data.Filter.EndDate" AutoApply="true" />

Data - is injectable service with filter object

at first step start and end is a null, after getting first list i've set it to peroid:

Data.Filter.StartDate = new DateTimeOffset(List.Min(m => m.Created));
Data.Filter.EndDate = new DateTimeOffset(List.Max(m => m.Created));

but inputbox still empty:

if i just open and close without changing dates - it starts to show period:

Hi

Could we select multi dates in a single picker mode without pressing ctrl or anything or select with ctrl?

Hi, is there a way for cleaning the datepicker? I tried using the OnClose event but is called also when the Apply button is clicked, so I can't find a correct way to clean or restart the value 😞.

I think it's missing the OnCancel event, in the original doc they used it to perform clean:

$('#daterange').on('cancel.daterangepicker', function(ev, picker) { //do something, like clearing an input $('#daterange').val(''); });

Hope there is someone that can helps me.

Btw nice port! 👍

1)<DateRangePicker DateFormat="dd-MMM-yyyy" style="align-content:center" @ref="DPRef" CloseOnOutsideClick="false" Culture="@(System.Globalization.CultureInfo.GetCultureInfo("en-US"))" ApplyLabel="OK" ShowOnlyOneCalendar="true" StartDate="StartDate" EndDate="EndDate" OnRangeSelect="OnRangeSelect">

But is there a way to select multiple single dates (while displaying more then one calendar)?

Originally posted by @mkopara in #6 (comment)

Hey,
Inspired by other DateRangePickers such as bulma calendar I would like to know if you are planning a feature like this?

I like the idea of being able to create a header or footer if necessary. Tags could be <HeaderTemplate> or <FooterTemplate>.

Thanks in advance

Hello, could you please consider making an inline version with just one calendar? Thanks.

Im using SingleDatePicker and are having issues with clearing the component. If user decides to not provide a date after all he might clear the text, the placeholder is the visible again, but nothing has changed in the Model state.

Clearing the date using text input or using the provided clear button in text input does not fire event OnRangeSelect, also the bound properties is not set to null. Its not possible to reset date selected using when SingleDatePicker="true".

According to readme I can override the templated buttons, but these butons are not available in the SinglePicker.

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

If today is 21st Oct...
I select the 22nd Oct as the start date on the left hand side calendar.
I click the right hand side calendar's right chevron to display December...
I click the right hand side calendar's left chevron to display November...
I click the right hand side calendar's left chevron again to display October but the Input disappears and I lose the start date?

Is there a way to make the start date read-only while allowing the end date to be modified?

How we can hide Previous Month dates in 1 month calendar.

The original js DateRangePicker supported time selection. This Blazor port doesn't.

Automatically display calendar while open

Can you please implement this feature? Thanks!

Hey,
is there a way to set DateRangePicker's id explicit like:
<DateRangePicker id="foobar">

This would be great for <label for="foobar">Show</label>

If I set the id as shown above the calendar appears in the left top corner of the screen and not under the generated input field.

I think this happens because of other id in the javascript.

Thank you for your reply

how show like this

Hello there!

I'm having trouble while selecting month or year from the component dropdown.
I'm using the latest version but still face the following error.

blazor.server.js:19 [2020-11-24T10:42:50.707Z] Error: System.ArgumentOutOfRangeException: Year, Month, and Day parameters describe an un-representable DateTime.
   at System.DateTime.DateToTicks(Int32 year, Int32 month, Int32 day)
   at System.DateTime..ctor(Int32 year, Int32 month, Int32 day, Int32 hour, Int32 minute, Int32 second)
   at BlazorDateRangePicker.Calendar.MonthSelected(Int32 month)
   at BlazorDateRangePicker.Calendar.set_CurrentMonth(Int32 value)
   at BlazorDateRangePicker.Calendar.<BuildRenderTree>b__52_2(Int32 __value)
   at Microsoft.AspNetCore.Components.EventCallbackFactoryBinderExtensions.<>c__DisplayClass22_0`1.<CreateBinderCore>b__0(ChangeEventArgs e)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

<DateRangePicker Culture="Culture"
                     @bind-StartDate="Model.DateStart"
                     @bind-EndDate="Model.DateEnd"
                     OnRangeSelect="OnRangeSelect"
                     ApplyLabel="@General.Apply"
                     CancelLabel="@General.Cancel"
                     DateFormat="dd/MM/yyyy">
        <PickerTemplate>
            <div class="datetime-body">
...
            </div>
        </PickerTemplate>
    </DateRangePicker>

When the BlazorDateRangePicker NuGet package is installed, compilerconfig.json is created in the project root. I assume this is not intended?

Hello, after date selected, two way bind shouldn't it work?

<DateRangePicker SingleDatePicker="true"
				 class="form-control form-control-sm"
				 @bind-Value="Date"
				 placeholder="Date"></DateRangePicker>

<button class="btn btn-sm"
		type="button" @onclick="ShowDate">
	Show Date
</button>

@code
{
	DateTime Date { get; set; }

	void ShowDate() => Console.WriteLine(Date);
}

WASM: 01/01/0001 00:00:00

Hey,
I encountered strange behavior:

If you select a date range, the input will display start - end date (so far, so good).
If you clear the input field by using backspace key etc. the start and end date property is still set to their values. So clearing the input field has no effect. In my opinion this behavior is not intuitive.

Furthermore if you use SingleDatePicker = "true" you have no buttons, so the user cannot reset his chosen date.

You can see what I mean on your documentation:

• Single Date Picker
• Click on the input field and choose a date
• Clear the input field by using backspace key
• Click the input field again (the date is still selected)

I use an editform and the daterangepicker into a TD element.
When I click on the DateRangePicker, values are shown outside of the TD element: on the completely left side of the screen (menu of the website).
I'm using the default Blazor template when you create a project and here is an example of the code:

`@page "/Sample"

@using Sample.Domain
@using BlazorDateRangePicker

@Inject Sample.Data.OrdersService OneService
@Inject Sample.Data.ClientsService TwoService
@Inject NavigationManager NavigationManager

<DataAnnotationsValidator />

<table class="table">
    <tr>
        <td>Date</td>
        <td>
            <DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate" Drops="DropsType.Down" Opens="SideType.Right" class="form-control form-control-sm" placeholder="Select dates..."/>
        </td>
    </tr>
    <tr>`

I'm using .Net Core 3.1, Blazor and the DRP is used inside a component.razor

Hi,

I see that this is a port of js DateRangePicker.
I noticed in that version it is possible to enable time also, so you can select both dates and times.
Is that something that is already possible or is that a feature TODO?
Sorry if I overlooked it, but I didn't see it in the documentation.

Thank you!

Dj

Hi, just wondering if there is a way to allow setting the values to null.

I am using it in single mode - I bind it to a property. When I select a date, my property is updated with the value. When I then delete the value from the input, the property is not set to null, it retains the last "valid" value.

Is there a way to do this/any plans to add this in the future?

Hi,

I'm just looking to select a single instance of the date time picker, bind it to my value and pass that to a method to call data from the api.

Thanks for any help,

Dave

DateTImePicker.txt

Hi!
I am using context.StartDate and EndDate in the PickerTemplate to make some calculations before I accept the range.
In the previous version it was working like charm but in this one I get null for both values the first time and the "old values" the following. The only way to get the "new" values is clicking Accept.
Here is the (now not working) working sample

<PickerTemplate>
    <div id="@context.ParentId" @onclick="context.Toggle" style="background: #fff; cursor: pointer; padding: .45rem 10px; border: 1px solid #ccc; border-radius: 5px;">
        <i class="fa fa-calendar"></i>&nbsp;
        @if (context.StartDate == null && context.EndDate == null)
        {
            <span>Seleccione Fechas...</span>
        }
        else if (context.StartDate != null && context.EndDate == null)
        {
            <span>@context.StartDate.Value.ToString("dd/MM/yyyy")</span>
        }
        else
        {
            <span>
                @context.FormattedRange @(StartDateSelected != null && EndDateSelected != null &&
                context.StartDate.Value == StartDateSelected.Value && context.EndDate.Value == EndDateSelected.Value ? noches :
                 $" - ({(context.EndDate.Value.Subtract(context.StartDate.Value).Days).ToString()} noches)"  )
            </span>
    }
        <i class="fa fa-chevron-down float-right"></i>
    </div>
</PickerTemplate>

As you can see, it´s based on your sample.
Am i doing something wrong?

Thank you
Regards
H

Hi again.
I saw you are planning a 3.0 version.
May you consider...?

1. MinSpan
   For example to avoid the user to select the same Start and EndDate
2. OnDaySelected
   For Example to suggest the EndDate when the StartDate is selected.

Thank you
Regards
H

Hi.

I would like to remove and or add custom styling to the calendar components itself. Where can this be done?

Thanks

If a user picks a date from the calendar control, OnSelectionStart captures the change. This event does not happen if someone types a new date into the box and tabs off. is there an event to capture that type of change?

Awsome component.
It would be great if you could include the option of having a "Clear"-button along with "Apply" and "Cancel" that will set the selected range back to NULL.

Hey,
I would like to be able to select only Saturdays that are not holidays:

SaturdayPanel.razor

                <DatePicker
                    SingleDatePicker="true"
                    StartDate="SelectedSaturday"
                    StartDateChanged="DateChanged"
                    DaysEnabledFunctionAsync="OnlySaturdayEnabled"
                    DayCellRenderer="DayCellRenderer"/>

SaturdayPanel.razor.cs

        protected Task<bool> OnlySaturdayEnabled(DateTimeOffset day)
        {
            return Task.FromResult(day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date));
        }

        protected object DayCellRenderer(DateTimeOffset day)
        {
            return day.DayOfWeek == DayOfWeek.Saturday && Holidays.All(x => x != day.Date)
                ? "has-text-green"
                :  "has-text-red";
        }

Everything works as expected except the 4th of every month. This is displayed in red and cannot be clicked on. However, this is not crossed out like the rest of the non-selectable data:

Thank you in advance.

I found this bug while SingleDatePicker is true. If you select a specific date like 18/06/2020 and try to select again the calendar and change month using the arrows the displayed month is incorrect

I'm building an app where data entry is done primarily with the keyboard, not the mouse. I like how fast your date picker is for this purpose. When I tab into the field the selection box opens, but when I tab out the box does not close up. I need to click the mouse to close the box. It will close if I add a complete date, but leaving the date blank, not changing an existing date, or adding an invalid partial date, all leave the dialog visible when tabbing out.

This is how I am specifying the picker, though the problem occurs with all sets of parameters.
<DateRangePicker SingleDatePicker="true" ShowDropdowns="false"/>

Hi ,

I want to use it in a Filtering List . (2 Date Range Pickers From Date, To Date) to accomplish the situation when the user wants the data only using first Date Picker and I am using : OnRangeSelect="OnChangedToDate".

Is there an event when the user delete the input text from the keyboard ? Because sometimes maybe will delete the input text ? The result expected is to make FromDate = null for example when will delete the input text.

Thank's

My configuration

<DateRangePicker OnRangeSelect="OnChangedFromDate" SingleDatePicker="true" LinkedCalendars="true" @bind-StartDate="FromDate" Culture="@(System.Globalization.CultureInfo.GetCultureInfo(PageState?.CultureInfo ?? "en-GB"))" ApplyLabel="@_SharedLocalizer["Apply"]" CancelLabel="@_SharedLocalizer["Cancel"]">

<DateRangePicker OnRangeSelect="OnChangedToDate" SingleDatePicker="true" LinkedCalendars="true" @bind-StartDate="ToDate" Culture="@(System.Globalization.CultureInfo.GetCultureInfo(PageState?.CultureInfo ?? "en-GB"))" ApplyLabel="@_SharedLocalizer["Apply"]" CancelLabel="@_SharedLocalizer["Cancel"]"></DateRangePicker>

It works on desktop chrome, but does not work on Mobile Safari. Am I missing something in my implementation?

<DateRangePicker @ref="Picker"
                 SingleDatePicker="true"
                 MinDate="DateTime.Now.AddYears(-130)"
                 MaxDate="DateTime.Now"
                 Opens="SideType.Right"
                 OnRangeSelect="OnRangeSelect"
                 OnMonthChanged="OnMonthChanged"
                 OnSelectionStart="OnSelectionStart"
                 OnOpened="OnOpened"
                 OnClosed="OnClosed"
                 OnCancel="OnCancel">
    <PickerTemplate Context="picker">
        <div class="form-control text-truncate border-right-0" id="@picker.ParentId" @onclick="picker.Toggle">
            <span>
                @if (editUser.Birthday == null)
                {
                    <span>Select dates...</span>
                }
                else
                {
                    <span>@editUser.Birthday.Value.ToString("MM/dd/yyyy")</span>
                }
            </span>
        </div>
        <span class="input-group-text bg-transparent border-left-0 pl-0">
            <i class="material-icons align-text-bottom" role="button" @onclick="picker.Toggle">calendar_today</i>
        </span>
    </PickerTemplate>
</DateRangePicker>



@code{
DateRangePicker Picker;
    private void OnOpened()
    {

    }
    private void OnClosed()
    {

    }
    private void OnCancel(bool byButton)
    {

    }
    private void OnMonthChanged()
    {
        var leftMonth = Picker.LeftCalendar.Month;
        var rightMonth = Picker.RightCalendar.Month;
    }
    private void OnSelectionStart(DateTimeOffset date)
    {
        editUser.Birthday = date.LocalDateTime;
    }
    public void OnRangeSelect(DateRange range)
    {

    }
}

Hello,

Currently the DateRangePicker only has the events for OnRangeSelect, OnOpened, OnClosed, and OnCancel. I would like for there to be OnMonthChanged like the Calendar component has so I can pull availability and repopulate the calendar with available dates.

Thanks.

Add this to README to allow developers to add the library static assets without the extra library:

    <script src="_content/BlazorDateRangePicker/clickAndPositionHandler.js"></script>
    <link rel="stylesheet" href="_content/BlazorDateRangePicker/daterangepicker.min.css" />

On side note, the EmbeddedBlazorContent library is creative but it only works if the project explicitly add the static files as Embedded Resource. (e.g. it doesn't work with https://github.com/SteveSandersonMS/BlazorInputFile library)

According to Microsoft Docs:
https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0
Under heading:
"InputText based on the input event"
It mentions to add class="@CssClass" for dynamic CSS to work with form validation.
I think this attribute is missing in your component.
Upon validation it doesn't add "invalid" class to component and therefore it doesn't highlight the component in red outline even when its empty.

This is looking really good.

If I change the month or year on the first calendar the second should change to the following month (if it is previous to the first)

eg First calendar July 2021 then the second should also change to August 2021
eg First calendar December 2019 then the second should also change to January 2020

Allowing easier range selection.

I realise I should probably do a PR for this but it may not be for a while.
Leaving this here not as a demand but as a note.

I love your date picker for selecting date ranges but is there a way to use this as a single calendar/date selector? I see you can set SingleDatePicker to true but it still tracks both dates.

Thanks,
Bryan

Love the picker, it's great. However, I need to style it so the backgrounds are dark instead of white. Rather than me reverse-engineer the CSS to figure out which colours I need to change, any chance you could share a dark theme? Or restructure the CSS so that the white background and dark text are defined in one place and can easily be overwritten? :)