滑动时间选择器弹出插件 jQuery nj时间选择器

  • 源码大小:6.97KB
  • 所需积分:1积分
  • 源码编号:19JP-3583
  • 浏览次数:467次
  • 最后更新:2023年06月28日
  • 所属栏目:时间和时钟
本站默认解压密码:19jp.com 或 19jp_com

简介

nj timepick是一个简单、轻量级、用户友好的时间选择器插件,旨在改善用户选择和输入时间的体验

它用一个滑动弹出窗口取代了标准的时间选择器输入,用户可以从iOS风格的转轮微调器中轻松快速地选择分钟、秒和AM/PM。支持键盘交互和触摸手势。

参见:

  • 10个最佳日期和时间选择器JavaScript插件

请参阅实际操作:

如何使用它:

1.在文档中加载jQuery nj时间选择器插件的文件。

<link rel="stylesheet" href="css/nj-timepick.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/time-picker.js"></script>

2.就是这样。插件将自动将自定义时间选择器应用于文档中的所有时间输入字段。

<input type="time" />

3.自定义时间选择器弹出窗口

.nj-timepick {
  position: fixed;
  right: -100%;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 5000;
  transition: right 0.7s ease;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
}

预览截图