Automatic Open calendar option about blazordaterangepicker HOT 22 CLOSED

You want to automatically open the picker on a page load?

If so, then do this in your page code:

<DateRangePicker @ref="DPRef"/>

@code{
    DateRangePicker DPRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            DPRef?.Open();
        }
    }
}

It'll be possible after update to a preview9 version of a library, I'll publish it tonight.

from blazordaterangepicker.

Thanks it working but after click on any ware automatically closed, can u give suggestion for that

from blazordaterangepicker.

how to find the date

from blazordaterangepicker.

To disable autoclose on outside click you must delete body of InvokeClickOutside function in DatePickerComponentBase.cs file.

from blazordaterangepicker.

Ok, there is CloseOnOutsideClick property in 1.0.0-preview9-02 version, just:

<DateRangePicker CloseOnOutsideClick="false"/>

from blazordaterangepicker.

Yeah its working but some bugs there
1.Overwrite the App Bar
2.Dialog box also not shown fully

can you try inline function like other date picker, and also one more request can use single calendar instead of two calendar

from blazordaterangepicker.

Also its overwriting with nearest component

from blazordaterangepicker.

To show only one calendar (1.0.0-preview9-03):

<DateRangePicker ShowOnlyOneCalendar="true"/>

Layout issues probably caused by your css styles. You can create sample repo, I'll look into it.

from blazordaterangepicker.

after this also showing two calendar

from blazordaterangepicker.

Are you updated dependency to 1.0.0-preview9-03 version?

from blazordaterangepicker.

Yeah i updated already

from blazordaterangepicker.

Share the code, I'll see

from blazordaterangepicker.

<DateRangePicker style="width:100%" ShowOnlyOneCalendar="false" CloseOnOutsideClick="false" @ref="DPRef" StartDate="StartDate" EndDate="EndDate" OnRangeSelect="OnRangeSelect" @OnClick="@(()=>GetTimeOffsbyDate(StartDate))">

from blazordaterangepicker.

You've mistaken: ShowOnlyOneCalendar should be true, but it's false in your code. Also, consider using OnOpened event instead of onclick handler.

And use markup for code insertions, because @ will call users with names ref and OnClick in our discussion.

from blazordaterangepicker.

thanks ,
Can Write the action for apply button

from blazordaterangepicker.

OnRangeSelect triggered when the apply button is clicked.

from blazordaterangepicker.

thanks

from blazordaterangepicker.

Its possible to change the over write on other component

from blazordaterangepicker.

https://user-images.githubusercontent.com/9216348/64759363-85301200-d554-11e9-82f8-f3d0df0db160.png
https://user-images.githubusercontent.com/9216348/64759933-1c499980-d556-11e9-8489-cad47080bf1e.png

from blazordaterangepicker.

Sure, just modify z-index properties in your site css either for this picker or for your modal.

from blazordaterangepicker.

how display date like 12-Aug-2019

from blazordaterangepicker.

There is a property named DateFormat for such purpose.

<DateRangePicker DateFormat="dd-MMM-yyyy"/>

Date format docs

from blazordaterangepicker.