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); }