【jQuery Timepicker插件用法详细教程】在本文中, 我们将学习如何使用jQuery将时间选择器添加到jQueryUI Datepicker时间选择器插件图片插件。
注意：请下载jQuery 时间选择器插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。

< link href =" http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel =" stylesheet" type =" text / css" /> < link href ="https://www.lsbin.com/jquery-ui-timepicker-addon.css" rel =" stylesheet" type =" text / css" /> < script src =" http://code.jquery.com/jquery-1.11.1.min.js"> < / script> < script src =" http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"> < / script> < script src ="https://www.lsbin.com/jquery-ui-timepicker-addon .js"> < / script>

范例1：以下示例演示了jQuery的实例化datetimepicker()插件的方法。

< !DOCTYPE html> < html lang = "en" xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < title > Adding a Timepicker to jQuery UI Datepicker< / title > < style type = "text/css" > body { margin: 0; padding: 20px; border: 0; background-color: #e9e9e9; border-top: solid 10px #7ba9b2; font: Arial, sans-serif; } .wrapper { width: 800px; border: solid 1px #eeeeee; background-color: #ffffff; padding: 20px; margin: 0 auto; } < / style > < link rel = "stylesheet" media = "all" type = "text/css" href="http://code.jquery.com/ui/1.11.0/themes/ smoothness/jquery-ui.css" /> < link rel = "stylesheet" media = "all" type = "text/css" href = "https://www.lsbin.com/jquery-ui-timepicker-addon.css" /> < / head > < body > < div class = "wrapper" > < h2 > Adding a Timepicker to jQuery UI Datepicker< / h2 > < div class = "container" > < p > Add a simple jQuery UI datetimepicker< / p > < div > < input type = "text" name = "dateTimePicker" id = "dateTimePicker" valuehttps://www.lsbin.com/= "" /> < / div > < / div > < / div > < script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.1.min.js" > < / script > < script type = "text/javascript" src = "http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" > < / script > < script type = "text/javascript" src = "https://www.lsbin.com/jquery-ui-timepicker-addon.js" > < / script > < script type = "text/javascript" > // Initialization of datetimepicker $(function () { $("#dateTimePicker").datetimepicker(); }); < / script > < / body > < / html >

输出如下：

文章图片
将时间选择器添加到jQuery UI Datepicker：在上面的HTML代码中, 我们可以为" timeFormat", " timezonelist"和本地化添加以下设置。程序员可以根据需要使用更多选项。

< script> $( function (){$( '#timePicker' ).datetimepicker({ timeFormat: "hh:mm tt" , //timezone format timezoneList: [ { value: -300, label: 'Eastern' }, { value: -360, label: 'Central' }, { value: -420, label: 'Mountain' }, { value: -480, label: 'Pacific' } ] }); $( '#timePicker' ).timepicker( //$.timepicker.regional["localization code"] $.timepicker.regional[ 'en' ] //English ); }); < /script>

范例2：下面的示例演示了滑块功能, 其中步进时间间隔为一小时, 一分钟和几秒钟。请参考输出以更好地理解。移动滑块后, 它会以时间间隔跳入选项设置中提到的时间, 如下所示。
注意：请不要忘记将以下库包含在HTML代码中以用于滑块功能。

< script src ="https://www.lsbin.com/i18n / jquery-ui-timepicker-addon-i18n.min.js"> < / script> < script src ="https://www.lsbin.com/jquery-ui-sliderAccess.js"> < / script>

< !DOCTYPE html> < html lang = "en" xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < title > Adding a Timepicker to jQuery UI Datepicker< / title > < style type = "text/css" > body { margin: 0; padding: 20px; border: 0; background-color: #e9e9e9; border-top: solid 10px #7ba9b2; font: Arial, sans-serif; }.wrapper { width: 800px; border: solid 1px #eeeeee; background-color: #ffffff; padding: 20px; margin: 0 auto; } < / style > < link rel = "stylesheet" media = "all" type = "text/css" href="http://code.jquery.com/ui/1.11.0/ themes/smoothness/jquery-ui.css" /> < link rel = "stylesheet" media = "all" type = "text/css" href = "https://www.lsbin.com/jquery-ui-timepicker-addon.css" /> < / head > < body > < div class = "wrapper" > < h2 > Adding a step interval timepicker to jQuery UI Datepicker< / h2 > < div class = "container" > < p > Adding slider with step intervals for hour, minute and seconds< / p > < div > < input type = "text" name = "datePicker" id = "datePickerID" valuehttps://www.lsbin.com/= "" /> < / div > < / div > < / div > < script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.1.min.js" > < / script > < script type = "text/javascript" src = "http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" > < / script > < script type = "text/javascript" src = "https://www.lsbin.com/jquery-ui-timepicker-addon.js" > < / script > < script type = "text/javascript" src = "https://www.lsbin.com/i18n/jquery-ui-timepicker-addon-i18n.min.js" > < / script > < script type = "text/javascript" src = "https://www.lsbin.com/jquery-ui-sliderAccess.js" > < / script > < script type = "text/javascript" > $(function () { $("#datePickerID").datetimepicker(); $("#datePickerID").timepicker({ hourGrid: 4, minuteGrid: 10, timeFormat: "hh:mm tt", addSliderAccess: true, sliderAccessArgs: { touchonly: true }, stepHour: 2, // hour interval step stepMinute: 10, // minute interval step stepSecond: 10, // second interval step }); }); < / script > < / body > < / html >

输出如下：

文章图片
范例3：以下示例演示了如何为datetimepicker().

< !DOCTYPE html> < html lang = "en" xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < title > Adding a Timepicker to jQuery UI Datepicker< / title > < style type = "text/css" > body { margin: 0; padding: 20px; border: 0; background-color: #e9e9e9; border-top: solid 10px #7ba9b2; font: Arial, sans-serif; } .wrapper { width: 800px; border: solid 1px #eeeeee; background-color: #ffffff; padding: 20px; margin: 0 auto; } < / style > < link rel = "stylesheet" media = "all" type = "text/css" href="http://code.jquery.com/ui/1.11.0/themes/ smoothness/jquery-ui.css" /> < link rel = "stylesheet" media = "all" type = "text/css" href = "https://www.lsbin.com/jquery-ui-timepicker-addon.css" /> < / head > < body > < div class = "wrapper" > < h2 > Adding a Timepicker to jQuery UI Datepicker< / h2 > < div class = "container" > < p > Use of dropdowns in datetime picker< / p > < div > < input type = "text" name = "datePicker" id = "datePickerID" valuehttps://www.lsbin.com/= "" /> < / div > < / div > < / div > < script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.1.min.js" > < / script > < script type = "text/javascript" src = "http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" > < / script > < script type = "text/javascript" src = "https://www.lsbin.com/jquery-ui-timepicker-addon.js" > < / script > < script type = "text/javascript" > $(function () { $("#datePickerID").datetimepicker({ controlType: "select", oneLine: true, timeInput: true, timeFormat: "hh:mm tt", }); }); < / script > < / body > < / html >

输出如下：

文章图片

推荐阅读

• 

  有哪些电影比《山村老尸》还要恐怖？
• 

  中恒务报表分析助手
• 

  什么人不能吃辣椒
• 

  夏新m3,夏新M3217AW能开机绿灯不亮
• 

  直播伴侣皮套，直播伴侣好用吗
• 

  愿我们的梦想都能实现
• 

  描写雪后美景的成语
• 

  怎么改正孩子浮躁的毛病 孩子浮躁家长怎么引导
• 

  威视达康T7892WIP怎么样
• 

  抖音上传失败了如何解决？ 抖音上传服务器出错了怎么回事
• 

  碎碗属于什么垃圾
• 

  成都新城区在哪里 新城区地税务局在哪里，老城区和新城区哪个好
• 

  Android布局优化思考
• 

  脚长273mm匡威帆布鞋穿多大
• 

  将xml文件对象转化为Map对象
• 

  晨间日记（18）
• 

  电商做什么类目比较好 做电商什么类目的做好不好，做电商什么类目的做好不好赚钱
• 

  茶叶水里能加冰糖吗 茶叶水里加冰糖可以吗
• 

  网络电视怎样调出频道
• 

  web开发的硬件需求分析,视频剪辑硬件需求分析

• 如何为道德黑客建立个人实验室（）
• Python基本语法（if-else条件语句使用指南）
• Linux中的chmod命令及示例介绍
• 在旋转排序数组中找到旋转计数
• jQuery 多类选择器用法介绍
• 如何获取JavaScript对象的最后一项（）
• 微处理器（μC）和微处理器（μP）有什么区别（）
• Granblue Fantasy评测（简约之美）
• 众神与怪兽，彩虹六隔离区和看门狗（军团延迟）