如何仅使用 VanillaJS、HTML 和 CSS 来设置日期选择器的样式
How to style a datepicker using nothing but VanillaJS, HTML and CSS
我正在开发一个简单的网络应用程序，只使用 Vanilla JS、HTML 和 CSS。
我创建了一个表单，其中包含多个“文本”类型的输入字段。现在我想添加一个日期选择器。我尝试添加一个“日期”类型的输入字段，但我真的不喜欢这个日期选择器的设计，而且我还没有找到任何方法来设置单击该字段时弹出的日历的样式。
我的第一个问题是：有没有办法为“日期”类型的输入字段设置日历样式？
因为我假设这个问题的答案是“否”，所以我已经搜索了替代方案。那里有多个 GitHub 项目，设计日历。一个例子是 this。此示例需要将 html 代码添加到我的网页。最初，我不会显示日历-div，例如在我的 css 文件中将其样式设置为 display: none。我还必须向“文本”类型的输入字段添加一个监听器，然后单击该字段显示日历。但这会重新排列此“日期选择器”下方的输入字段，这是我不想要的。有没有办法只显示日历并让它与周围环境重叠，例如这个“日期选择器”字段下方的输入字段？
如果有任何众所周知的样式日期选择器替代品，我也很感激，除了 Vanilla JS，HTML 和 CSS，如果有的话。
您已完成调查，答案是：否。
<input type="date"> 或 <input type="datetime-local"> 是 HTML 输入，由浏览器供应商（Google、Mozilla、Apple）决定如何呈现它们。
如果您打开开发工具并启用影子 DOM，您甚至可以检查由这些输入创建的节点，但不建议对它们设置样式。
前端开发人员在 2022 年（可能还会有更多年）的生活是引入日期选择器依赖项，或者如果您想拥有特定的外观或功能，则自己创建日期选择器。根据我的经验，日期选择器并不难制作，但它是您必须注意的所有极端情况和本地化边缘情况。所以我认为使用依赖关系更容易。
如果您不想只为日期选择器带来成熟的框架，那么如果您搜索它们，有多种选择。
您可能喜欢现代网络组件，您可以搜索使用网络组件创建的日期选择器。这些不需要任何框架，只需要一个支持的浏览器。他们通常带有自己的样式表和 JS，可以进行一些自定义，我会尝试一下。
我正在开发一个简单的网络应用程序，只使用 Vanilla JS、HTML 和 CSS。
我创建了一个表单，其中包含多个“文本”类型的输入字段。现在我想添加一个日期选择器。我尝试添加一个“日期”类型的输入字段，但我真的不喜欢这个日期选择器的设计，而且我还没有找到任何方法来设置单击该字段时弹出的日历的样式。
我的第一个问题是：有没有办法为“日期”类型的输入字段设置日历样式？
因为我假设这个问题的答案是“否”，所以我已经搜索了替代方案。那里有多个 GitHub 项目，设计日历。一个例子是 this。此示例需要将 html 代码添加到我的网页。最初，我不会显示日历-div，例如在我的 css 文件中将其样式设置为 display: none。我还必须向“文本”类型的输入字段添加一个监听器，然后单击该字段显示日历。但这会重新排列此“日期选择器”下方的输入字段，这是我不想要的。有没有办法只显示日历并让它与周围环境重叠，例如这个“日期选择器”字段下方的输入字段？
如果有任何众所周知的样式日期选择器替代品，我也很感激，除了 Vanilla JS，HTML 和 CSS，如果有的话。
您已完成调查，答案是：否。
<input type="date"> 或 <input type="datetime-local"> 是 HTML 输入，由浏览器供应商（Google、Mozilla、Apple）决定如何呈现它们。
如果您打开开发工具并启用影子 DOM，您甚至可以检查由这些输入创建的节点，但不建议对它们设置样式。
前端开发人员在 2022 年（可能还会有更多年）的生活是引入日期选择器依赖项，或者如果您想拥有特定的外观或功能，则自己创建日期选择器。根据我的经验，日期选择器并不难制作，但它是您必须注意的所有极端情况和本地化边缘情况。所以我认为使用依赖关系更容易。
如果您不想只为日期选择器带来成熟的框架，那么如果您搜索它们，有多种选择。
您可能喜欢现代网络组件，您可以搜索使用网络组件创建的日期选择器。这些不需要任何框架，只需要一个支持的浏览器。他们通常带有自己的样式表和 JS，可以进行一些自定义，我会尝试一下。