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

score 18 · Accepted Answer · answered Jan 14 '21 at 01:41

18

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; }
    }

answered Jan 14 '21 at 01:41

Sulieman Mansouri

519
3
13

2

Quite a weird flow compaired to the rest! but thanks for sharing, you saved me quite some time of trail and error. – Koenman Apr 23 '21 at 08:20
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 – Xebozone May 18 '23 at 14:40

score 0 · Answer 2 · answered Jun 03 '22 at 19:50

0

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.

answered Jun 03 '22 at 19:50

srHunter

93
6

2

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](/help/how-to-answer). – Community Jun 03 '22 at 21:05

Mudblazor DatePicker binding works one way only

2 Answers2