当前位置:主页 > JavsScript库 > 日期 / 时间 >

触摸时钟时间选择器插件 - clocklet
栏目分类:日期 / 时间   发布日期:2021-08-17   浏览次数:

clocklet 是一个简单的、可配置的、触摸友好的时间选择器插件,用纯 JavaScript 编写。

时间选择器插件使用户能够在激活时从时钟样式的弹出窗口中选择以小时、分钟为单位的时间。

还支持 AM(12 小时)和 PM(24 小时)。

使用:

将时钟插件的 JavaScript 和样式表导入到 html 文档中。

<link rel="stylesheet" href="css/clocklet.min.css" /> 
<script src="umd/clocklet.min.js"></script>

要自动初始化时钟时间选择器,只需将data-clocklet 属性添加到输入字段,如下所示:

<input data-clocklet maxlength="5" value="02:25">

要配置时钟时间选择器,请将以下选项传递给data-clocklet 属性:

<input data-clocklet data-clocklet="format: _H:_m;" maxlength="5" value="02:25">
{
  className: '',
  format: 'HH:mm',
  placement: 'bottom', // 或 'top'
  alignment: 'left', // 或 'rignt'
  appendTo: 'body',
  zIndex: '',
  dispatchesInputEvents: true
}

可用的事件处理程序:

<input class="event" data-clocklet maxlength="5" value="02:25">
var instance = document.querySelector('.event');
  
instance.addEventListener('clocklet.opening', function (event) {
  console.log(event.type, event.target.value, event.detail.options);
  if (document.querySelector('.clocklet-cancel-opening').checked) {
    event.preventDefault();
  }
});
  
instance.addEventListener('clocklet.opened', function (event) {
  console.log(event.type, event.target.value, event.detail.options);
});
  
instance.addEventListener('clocklet.closing', function (event) {
  console.log(event.type, event.target.value);
  if (document.querySelector('.clocklet-cancel-closing').checked) {
    event.preventDefault();
  }
});
  
instance.addEventListener('clocklet.closed', function (event) {
  console.log(event.type, event.target.value);
});
  
instance.addEventListener('input', function (event) {
  console.log(event.type, event.target.value, event.target.value);
});

API 方法。

// 设置选项
clocklet.defaultOptions.OptionName
  
// 打开时间选择器
clocklet.open(inputElement[, options])
  
// 关闭时间选择器
clocklet.close()
  
// 将时间选择器放入containerElement
clocklet.inline(containerElement[, { input, format }])


官方网站:https://github.com/luncheon/clocklet

相关热词: 时间选择器clocklet

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库