在使用 Web 开发的过程中，时间选择器是非常常见的组件。paper-time-picker 就是一个基于 Polymer 平台的时间选择器组件。它支持多种格式的时间显示，并且可以自定义颜色和大小等属性。
安装 paper-time-picker
要使用 paper-time-picker，需要先在项目中安装它。打开终端，进入项目的根目录，输入以下命令：
npm install --save paper-time-picker
这个命令会在项目的 node_modules 目录下安装 paper-time-picker，同时将这个包的信息保存到项目的 package.json 文件里面。
导入 paper-time-picker
安装完成之后，就可以在项目中导入并使用 paper-time-picker 了。首先，在 HTML 文件中引入 paper-time-picker 库：
<link rel="import" href="node_modules/paper-time-picker/paper-time-picker.html">
然后，在需要使用时间选择器的地方，使用 paper-time-picker 标签：
<paper-time-picker></paper-time-picker>
这样就可以在页面上显示一个默认样式的时间选择器。接下来，我们可以进行更详细的配置。
配置 paper-time-picker
paper-time-picker 有很多可配置的属性。下面是一些常用的属性：
time
这个属性用来设置时间选择器的默认时间。它的值可以是一个日期对象或表示日期时间的字符串。
<paper-time-picker time="2019-08-01T08:00:00"></paper-time-picker>
format
这个属性用来设置时间选择器的时间格式。它的值可以是以下几种之一：
- 12-hour：12 小时制（默认）
- 24-hour：24 小时制
- h:mm A：12 小时制，并显示 AM/PM
<paper-time-picker format="24-hour"></paper-time-picker>
color
这个属性用来设置时间选择器的颜色。它可以是任何有效的 CSS 颜色值。
<paper-time-picker color="#f00"></paper-time-picker>
clock-size
这个属性用来设置时间选择器的大小。它的值可以是任何有效的 CSS 尺寸值。
<paper-time-picker clock-size="200px"></paper-time-picker>
示例代码
下面是一个完整的示例代码，它展示了如何使用 paper-time-picker 来选择时间：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ------------
----- ------------ -------------------------------------------------------------
-------
------
------------------ --------------------------
----------------
------------
-------------------
--------------------
-------
-------总结
paper-time-picker 是一个功能强大的时间选择器组件。它支持多种格式的时间显示，并可以自定义颜色和大小等属性。通过本文的介绍，你可以快速上手使用 paper-time-picker，为自己的项目添加时间选择器功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a12