nj timepick是一个简单、轻量级、用户友好的时间选择器插件,旨在改善用户选择和输入时间的体验
它用一个滑动弹出窗口取代了标准的时间选择器输入,用户可以从iOS风格的转轮微调器中轻松快速地选择分钟、秒和AM/PM。支持键盘交互和触摸手势。
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);
- }