总是显示占据整个div的日期输入日历。

Posted 2021-04-28

我使用ASP.NET Core 2.2 MVC，我有一个包含日期输入的页面。当页面加载时，我想让它的日历始终保持默认打开，而不需要点击小箭头。

如果可以的话，能不能把这个箭头也去掉？我还是希望有文本框供手动输入。

我还希望日历总是占据其父div的高度和宽度。如果div的高度是相对的，那么日历就会根据需要进行拉伸。

我所寻找的解决方案不需要完全这样解决，我对插件持开放态度。我已经尝试过 JQuery UI数据选择器 但我还没有得到我想要的工作方式。有一点需要注意的是，我有 asp-for 属性的输入标签。

html.CSS

<div id="wapper">
    <input asp-for="@Model.DatePicked" type="date" required />
</div>

CSS。

#wrapper {
   height: 20vh;
   width: 20vw;
}

答案

如果你想使用JQuery UI datepicker。

当页面加载时，我希望它的日历总是默认保持打开，而不需要点击小箭头。

你可以使用内联模式，它显示的数据选择器嵌入在页面中，而不是在一个覆盖。只需在div上调用.datepicker()而不是输入。

$("#datepicker").datepicker();

因为你在div中调用datepicker，它总是按照你的意愿保持打开。

<div id="datepicker"></div>

.

如果可以的话，箭头也可以去掉吗？我还是希望有文本框供手动输入。

在内联模式下，没有任何箭头，如果你想在文本框中显示日期。

<input type="text" id="alternate">

$("#datepicker").datepicker({
  altField: "#alternate"
});