CalendarExtender Component

The CalendarExtender attaches a popup calendar date picker to a target textbox. When the user clicks or focuses the textbox, a calendar appears for date selection. This emulates the Ajax Control Toolkit CalendarExtender.

1. Basic Date Picker

Attach a calendar popup to a textbox with the default MM/dd/yyyy format.

<input type="text" id="txtBasicDate" />
<CalendarExtender TargetControlID="txtBasicDate" Format="MM/dd/yyyy" />

2. Date Range Constraints

Use StartDate and EndDate to restrict selectable dates. Dates outside the range are disabled.

<input type="text" id="txtRangeDate" />
<CalendarExtender TargetControlID="txtRangeDate"
                  Format="MM/dd/yyyy"
                  StartDate="@startOfMonth"
                  EndDate="@endOfMonth" />

3. Different Date Formats

The Format property accepts .NET date format strings.

<input type="text" id="txtShortDate" />
<CalendarExtender TargetControlID="txtShortDate" Format="d" />

<input type="text" id="txtLongDate" />
<CalendarExtender TargetControlID="txtLongDate" Format="yyyy-MM-dd" />

4. PopupPosition Options

Control where the calendar appears relative to the textbox using PopupPosition.

<input type="text" id="txtBottomLeft" />
<CalendarExtender TargetControlID="txtBottomLeft"
                  PopupPosition="CalendarPosition.BottomLeft" />

<input type="text" id="txtRight" />
<CalendarExtender TargetControlID="txtRight"
                  PopupPosition="CalendarPosition.Right" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtDate" runat="server" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
    TargetControlID="txtDate"
    Format="MM/dd/yyyy"
    PopupPosition="BottomLeft" />

Blazor with BWFC (After)

<input type="text" id="txtDate" />
<CalendarExtender TargetControlID="txtDate"
                  Format="MM/dd/yyyy"
                  PopupPosition="CalendarPosition.BottomLeft" />

Migration Steps

1. Remove asp:ScriptManager
2. Replace <asp:TextBox> with <input type="text"> keeping the same id
3. Replace <ajaxToolkit:CalendarExtender> with <CalendarExtender>
4. Keep TargetControlID and Format values unchanged
5. Prefix enum values with type name: PopupPosition="CalendarPosition.BottomLeft"
6. Ensure the page uses @rendermode InteractiveServer