触屏手机端时间选择插件clocklet.js

触屏手机端时间选择插件clocklet.js源码下载

看看谁在用

查看文件结构

文件大小:0.01M

资源分类: 插件-时间

更新时间: 2021-03-24

clocklet.js是一个简单的、可配置的,触屏移动时间选择器插件,用纯JavaScript编写的时间插件。允许用户选择一个时间,小时,分钟时从一个时钟样式的弹出激活。

input初始化插件
<input data-clocklet maxlength="5" value="02:25">
配置格式
<input data-clocklet data-clocklet="format: _H:_m;" maxlength="5" value="02:25">
{
  className: '',
  format: 'HH:mm',
  placement: 'bottom', // or 'top'
  alignment: 'left', // or 'rignt'
  appendTo: 'body',
  zIndex: '',
  dispatchesInputEvents: true
}
事件处理方式
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()

// 替换时间容器元素
clocklet.inline(containerElement[, { input, format }])

触屏手机端时间选择插件clocklet.js

正在加载文件目录...

也许你还喜欢

  1. Bootstrap双日历时间选择插件
  2. 炫酷Bootstrap和材料设计日历时间选择插件
  3. Bootstrap弹出时钟日期时间选择插件
  4. js弹出式滑动选择时间插件
  5. jquery弹出选择出生日期特效
  6. jQuery框弹出日历插件
html5冒险小游戏网页代码
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2