Mudblazor DatePicker binding works one way only

Question

I have been trying to bind mudblazor datepicker to a DateTime property using Date.

<MudDatePicker Label="Start Date" Date="@StartDate" />
<MudTextField Label="SelectedDate" @bind-Value="@StartDate" />
<MudText Typo="Typo.h3">Selected Date is: @StartDate</MudText>

@code
    {
        public DateTime StartDate { get; set; }
        public string DateString { get; set; }
    }

I have tried this code on their site and in visual studio The code will update the Date Picker and my Text output when leaving the text field, this is normal behavior. However, I want to change the Text based on my selection of Date picker. I have tried binding to date and value. both don't reflect the selection I have made.

I have checked the documentation on their site and there is nothing on how to handle binding beyond what I am doing.

If any one knows how to bind Date picker in mudblazor please help. Thanks

Culet

Answer 1

for anyone interested here is the answer: A Date picker in Mudblazor will only bind to a nullable DateTime, and I have to use @bind-Date. So my sample code that should work looks like this:

<MudDatePicker Label="Start Date" @bind-Date="@StartDate" />
<MudTextField Label="SelectedDate" @bind-Value="@StartDate" />
<MudText Typo="Typo.h3">Selected Date is: @StartDate</MudText>

@code
    {
        public DateTime? StartDate { get; set; }
    }

Culet

Quite a weird flow compaired to the rest! but thanks for sharing, you saved me quite some time of trail and error. – Casablanca

I was using a DateRangePicker, and manually implementing the Value and OnChanged rather than using a @bind. What worked for me was that the object needed to update. I couldn't just set DateRange.Start and DateRange.End. I needed to give it a new object for the UI to update i.e. DateRange = new DateRange(Start, End); The binding value also did not need to be nullable. The key was assigning a new object – Forgetmenot

Answer 2

I was having a similar issue with MudDateRangePicker. I found that I could use a nullable or a non-nullable DateRange variable but if I wanted to get the currently selected Start & End dates from a callback function, I would have to call the DateRangePicker.Close() method before I checked the dates. Just FYI if anyone else is looking at this issue.

Itinerate

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Amoeboid