帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery(timepicker)时间选择器插件

帝国模板之家 2020-11-05 网页特效 评论

timepicker是一款轻量级(约2.5kb)jQuery时间选择器插件,灵感来自谷歌日历。

特点:

  1. 高度定制,满足特殊需求

  2. 支持鼠标滚轮

  3. 支持键盘导航

  4. 轻量级,易于使用

1. 加载jQuery库和timepicker.js文件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>

2. 加载jquery.timepicker.css时间选择器样式文件。

<link rel="stylesheet" href="jquery.timepicker.css" />

3. 创建一个时间选择器文本字段。

<input id="basicExample" type="text" class="time" />

4. 调用插件。

$(function() {
  $('#basicExample').timepicker({
    // options here
  });
});

5. 默认选项。

  • show2400: false  24小时时间格式。

  • className: null  一个类名称,适用于HTML元素包含timepicker下拉。

  • minTime: 12:00am   第一个下拉列表中应该出现的时间。

  • maxTime:  最后的下拉列表中应该出现的时间。用来限制时间选择范围的。 默认值:minTime后24小时

  • showOnFocus:true 下拉输入获得焦点的时候显示一个timepicker。

  • showDuration:false 是否显示下拉列表中的每一项相对的时间。 minTime或durationTime必须设置。

  • durationTime:minTime   计算showDuration的相对时间。 默认值:minTime

  • step: 30  下拉列表中每一项的间隔时间。

  • timeFormat:'g:ia'  时间格式,可以PHP的日期()格式语法。

  • scrollDefault: null  如果为空,需要使用下拉滚动来选择显示时间位置。

  • orientation: 'ltr',   ltr或rtl。

  • selectOnBlur: false   失去焦点时,更新当前timepicker显示的时间。

  • appendTo:

  • disableTouchKeyboard: true  禁用屏幕键盘触摸。

  • forceRoundTime: false  默认值:假

  • listWidth: null 

  • disableTimeRanges: [],  禁止选择指定时间。 输入数组的时间对,像“[[' 3:00am ', ' 4:30am ']]默认值:[]

  • closeOnWindowScroll: false,  滚动时关闭timepicker窗口。默认值:false

  • typeaheadHighlight: true  默认值:true

  • noneOption: false  默认值:false,是否显示下拉选项 

  • showOn:true   设置为false来禁用自动显示。

  • disableTextInput: false  禁用输入,强制用户从列表中选择。

  • lang: { am: 'am', pm: 'pm', AM: 'AM', PM: 'PM', decimal: '.', mins: 'mins', hr: 'hr', hrs: 'hrs' }:常量用于timepicker语法。  

  • roundingFunction: round to nearest step  函数用于计算圆形。 函数将接收时间在秒和设置对象作为参数。 秒的函数应该处理null值。

  • stopScrollPropagation: false   

  • useSelect: false   这个选项不兼容以下选项:appendTo, closeOnWindowScroll, disableTouchKeyboard, forceRoundTime, scrollDefault, selectOnBlur typeAheadHighlight。

6.公共方法。

// Get the time as an integer, expressed as seconds from 12am.
$('#getTimeExample').timepicker('getSecondsFromMidnight');

// Get the time using a Javascript Date object, relative to a Date object (default: today's date).
$('#getTimeExample').timepicker('getTime');
$('#getTimeExample').timepicker('getTime', new Date());

// Close the timepicker dropdown.
$('#hideExample').timepicker('hide');

// Change the settings of an existing timepicker. 
// Calling option on a visible timepicker will cause the picker to be hidden.
$('#optionExample').timepicker({ 'timeFormat': 'g:ia' });

// Unbind an existing timepicker element.
$('#removeExample').timepicker('remove');

// Set the time using a Javascript Date object.
$('#setTimeExample').timepicker('setTime', new Date());

// Display the timepicker dropdown.
$('#showExample').timepicker('show');

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言