Question

<div class="col-md-4">
    <div class="mb-3">
        <label class="control-label" for="OrderSearch_StartDate">Start Date (Order Closed)</label>
        <div class="input-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" title="Predefined Dates">
                <img src="/images/mdi/calendar.svg" />
            </button>
            <ul class="dropdown-menu">
                <li><a data-mode="1" href="javascript:void(0)" class="set-dates dropdown-item">Today</a></li>
                <li><a data-mode="2" href="javascript:void(0)" class="set-dates dropdown-item">Yesterday</a></li>
                <li><a data-mode="3" href="javascript:void(0)" class="set-dates dropdown-item">This Week</a></li>
                <li><a data-mode="4" href="javascript:void(0)" class="set-dates dropdown-item">This Month</a></li>
                <li><a data-mode="5" href="javascript:void(0)" class="set-dates dropdown-item">This Quarter</a></li>
                <li><a data-mode="6" href="javascript:void(0)" class="set-dates dropdown-item">This Year</a></li>
                <li><a data-mode="7" href="javascript:void(0)" class="set-dates dropdown-item">Last Week</a></li>
                <li><a data-mode="8" href="javascript:void(0)" class="set-dates dropdown-item">Last Month</a></li>
                <li><a data-mode="9" href="javascript:void(0)" class="set-dates dropdown-item">Last Quarter</a></li>
                <li><a data-mode="10" href="javascript:void(0)" class="set-dates dropdown-item">Last Year</a></li>
            </ul>
            <input type="date" class="form-control" id="OrderSearch_StartDate" name="OrderSearch.StartDate" value="" />
            <input name="__Invariant" type="hidden" value="OrderSearch.StartDate" />
        </div>
        <span class="text-danger field-validation-valid" data-valmsg-for="OrderSearch.StartDate" data-valmsg-replace="true"></span>
    </div>
</div>

我使用bootstrap 5。由于我的

<input>

元素不再是

<div>

元素的最后一个元素，所以我的输入组的bootstrap样式被弄乱了。我不知道这个问题是否与Bootstrap有关。 我谷歌搜索了很多东西，但找不到任何东西。有人以前看过吗？

update：

这似乎与

<input>

标签助手有关。如果我将我的

StartDate

控件的类型明确设置为

text

或

datetime

，则不会添加隐藏元素。但是我需要一个约会。

目前，我正在指定这样的属性上的日期：

[Display(Name = "Start Date (Order Closed)")]
[DataType(DataType.Date)]
public DateTime? StartDate { get; set; }

在

Githubpost

.

中讨论了这一问题。 这与.NET 7左右发生的变化有关，该更改导致

<input>

标记助手添加隐藏的元素以帮助解决潜在的文化问题。

在大多数情况下，不会产生不利影响。但是，在这里，Bootstrap 5输入组仅围绕拐角处，以完成该组中的第一个和最后一个元素。由于标签助手在我的距离之后插入了一个额外的元素，所以我的角落没有变成圆角，这弄乱了格式。

如果您可以在没有此功能的情况下执行此操作，则可以使用以下代码禁用它。

builder.Services.AddRazorPages(options =>
{

    // ...

})
.AddViewOptions(options =>
{
    options.HtmlHelperOptions.FormInputRenderMode = FormInputRenderMode.AlwaysUseCurrentCulture;
});

Answer 1