本文介绍如何使用 npm 包 justime 来轻松实现网页表单的时间选择功能。justime 是一个基于 JavaScript 的插件，可用于定制规范的时间格式。它使用户可以轻松地选择格式固定的时间，同时能够提高表单填写速度和准确性，大大提高了网页操作的美观度和用户体验。
安装 justime
在使用 justime 前，需要先安装它。可以通过 npm 安装它，执行以下命令：
npm install justime --save
当然，如果你喜欢使用 yarn，也可以使用 yarn 来安装：
yarn add justime
在 HTML 中引入 justime
使用 justime，需要在 HTML 中引入相关的 CSS 和 JavaScript 文件，并且将表单元素与 justime 链接起来。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------- --
-------
------
------
---
------ -------------------------------
------ ----------- --------------- ----------------- --
----
-------
------- ----------------------------
--------
--- -----------------------
---------
-------
-------我们通过 <link> 标签引入了 justime 的 CSS 文件，并在表单中添加了一个文本输入框。在这个文本输入框上，我们使用新的实例化语法创建了一个 justime 实例。
自定义 Justime
justime 默认的输出格式是 24 小时制的时间。如果你想定制你自己的时间格式，你需要在实例化的时候传入参数。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------- --
-------
------
------
---
------ -------------------------------
------ ----------- --------------- ----------------- --
----
-------
------- ----------------------------
--------
--- ---------------------- -
------- ------ --
---
---------
-------
-------在这个例子中，我们将指定 justime 根据我们所需的格式输出时间，格式是 "hh:mm a"。
这里，我们使用了 "hh:mm a" 格式，其中 "hh" 表示小时，"mm" 表示分钟，"a" 表示上午或下午。如果你想定制自己的时间格式，只需在实例化 justime 时更改这个参数即可。
按钮的主题调整
justime 提供了一系列的实用工具，可以帮助你使用自定义样式改变表单中时间选择器按钮的样式。你可以查看官方文档，找到有用的 class、组件和主题调整来美化你的表单。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------- --
-------
------
------
---
------ -------------------------------
------ ----------- --------------- ----------------- --
----
-------
-------
-------------------- -
----------------- --------
------------- --------
------ ------
-
--------
------- ----------------------------
--------
--- ---------------------- -
------- ------ --
---
---------
-------
-------在这个例子里，我们给时间选择列表添加了 CSS 样式，从而优化了颜色和字体等方面的效果。你完全可以根据你的需求进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef84c49986ca68d86a1