html - Razor Pages DateTime 输入大小错误

Question

我将 Razor Pages 和 Asp.Net Core 2.2 与 bootstrap 4.3.1 结合使用。站点中没有自定义 CSS。我实际上只是通过在 Visual Studio 2019 中选择文件\新元素创建的

我的 cshtml 中有以下内容:

<form sp-page="./Index" method="get">
            <h5 class="card-title">Select Criteria</h5>
            <div class="container">
                <div class="row">
                    <div class="col">
                        <input asp-for="@Model.PageFilter.SearchFields.SearchFromDate" />
                        <input asp-for="@Model.PageFilter.SearchFields.SearchFromDateState" />
                    </div>

这在浏览器中呈现如下:

我想修复以下问题:

1. 缩小日期时间输入框的宽度。

   1. 以与其余文本相同粗细的字体显示秒数。
   2. 在输入框旁边显示日期时间输入复选框。

我为此创建了一个 jsfiddle:https://jsfiddle.net/BizTalkers/12m38bs0/1/

谁能告诉我如何做到这一点？

Answer 1

向日期时间输入框添加最大宽度应该可以解决问题 1 和问题 3。我在浏览器中看不到问题 2。

<input type="datetime-local" data-val="true" data-val-required="The SearchFromDate field is required." id="PageFilter_SearchFields_SearchFromDate" name="PageFilter.SearchFields.SearchFromDate" value="2019-05-17T16:54:03" style="max-width:180px">