EasyUI jQuery timespinner 小部件

EasyUI jQuery timespinner是一款基于jQuery框架的时间选择器控件，可用于快速、方便、美观地实现时间的选择功能。

特点

1. 轻量级，不依赖其他第三方库；
2. 易于使用，只需要轻轻一点即可选择时间；
3. 高度可定制化，可根据需要设置时间格式、初始值、步长等；
4. 可与其他EasyUI插件无缝结合，例如日期选择器等。

使用方法

在HTML文件中引入以下文件：

<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/mobile.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

在需要使用timespinner控件的标签中添加以下代码：

<input class="easyui-timespinner" required="true" data-options="showSeconds:true" />

<script>
    $(function(){
        $('.easyui-timespinner').timespinner();
    });
</script>

其中，showSeconds属性表示是否显示秒数，如果不需要，则可以将该属性删除。

自定义设置

EasyUI jQuery timespinner支持多种自定义设置，下面列举一些常用的设置：

• 设置时间格式

  <input class="easyui-timespinner" required="true" data-options="formatter:formatTime" />
  
  function formatTime(time){
      return time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
  }
  

• 设置初始值

  <input class="easyui-timespinner" required="true" data-options="value:'13:30:00'" />
  

• 设置时间步长

  <input class="easyui-timespinner" required="true" data-options="spinAlign:'horizontal',showSeconds:true,increment:300" />
  

• 设置禁用时间段

  <input class="easyui-timespinner" required="true" data-options="disabledTimes:disabledTimesArr" />
  
  var disabledTimesArr = [
      {start: '00:00', end: '09:00'},
      {start: '18:00', end: '23:59'}
  ];
  

更多设置请参考EasyUI jQuery timespinner官方文档。

总结

EasyUI jQuery timespinner是一款功能强大、使用方便、样式美观的时间选择器控件，适用于各种时间选择类的应用场景。其定制化设置丰富，可以满足不同开发者的需求。