jQuery Timepicker插件用法详细教程 _Timepicker

【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 >

输出如下：