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