jQuery Timepicker插件用法详细教程

2021年3月13日15:37:07 发表评论 806 次浏览

在本文中, 我们将学习如何使用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 =" 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 =" 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 = "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" 
                            value = "" />
                 </ 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 = "jquery-ui-timepicker-addon.js" >
       </ script >
  
         < script type = "text/javascript" >
             // Initialization of datetimepicker
             $(function () {
                 $("#dateTimePicker").datetimepicker();
             });
         </ script >
     </ body >
</ html >

输出如下：

jQuery Timepicker插件1

将时间选择器添加到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 =" i18n / jquery-ui-timepicker-addon-i18n.min.js"> </ script> <script src =" 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 = "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" 
                            value = "" />
                 </ 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 = "jquery-ui-timepicker-addon.js" >
       </ script >
         < script type = "text/javascript" 
                 src =
          "i18n/jquery-ui-timepicker-addon-i18n.min.js" >
       </ script >
         < script type = "text/javascript" 
                 src = "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 >

输出如下：

jQuery Timepicker插件2

范例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 = "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" 
                            value = "" />
                 </ 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 = "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 >

输出如下：

jQuery Timepicker插件3
木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: