Razor 页面日期时间输入错误大小答案

【问题标题】：Razor Pages DateTime Input Badly SizedRazor 页面日期时间输入错误大小
【发布时间】：2019-10-11 06:39:16
【问题描述】：

我将 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. 以与文本其余部分相同的粗细字体显示秒数。
2. 在输入框旁边显示日期时间输入复选框。

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

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

【问题讨论】：

标签： html css razor razor-pages

【解决方案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">

【讨论】：