DatePicker calendar not showing on click

Radzen.Blazor Components
1

As title says, I can't get the DatePicker component to bring up the calendar to select dates. Clicking simply does nothing.

My component code:

<RadzenRow>
    <RadzenColumn Size="12" SizeMD="3">
        <RadzenFormField Text="Begin Date" Style="width: 100%;" Component="DatePickerDateOnlyType">
            <RadzenDatePicker @bind-Value="@beginDate" DateFormat="MM/dd/yyyy" Name="DatePickerDateOnlyType" />
        </RadzenFormField>
    </RadzenColumn>
</RadzenRow>
----
DateOnly beginDate = DateOnly.FromDateTime(DateTime.Now);

I have added the applicable lines of code to my App file:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="Test.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <RadzenTheme Theme="material" @rendermode="InteractiveServer" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MatBlazor/dist/matBlazor.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
</body>

</html>

But still no luck. I wondered if a pop-up blocker could be affecting it, but there is none enabled.

My main layout has the @rendermode tag as well.

<RadzenComponents @rendermode="InteractiveServer" />

I have no idea what could be keeping the calendar from displaying -- as far as I can tell, the needed code is in place.

2

You might need to add it to the page as well.

3

I added the @rendermode to the page as well, but still no luck.

4

Instead of adding it to different parts you can simply add it to Routes component - in this way you will ensure that all pages are interactive.

5

Thanks for the suggestion -- I actually did try adding it here. But still no success.

6

To verify if the page with the picker is interactive you can place a regular HTML button, assign @onclick event and verify if the event handler is raised.

7

I believe I have gotten it to work, but I had to change the syntax.

Using @rendermode InteractiveServer instead of <RadzenComponents @rendermode="InteractiveServer" /> in the Routes component allowed the DatePicker to display (adding it to the top of the individual component works as well). I took the original line of code out of the MainLayout component as well.

8

I actually had it to work: my app.razor was missing the proper css file.