jQuery 时间选择器插件

在本文中，我们将学习如何使用 jQuery Timepicker-Addon图像插件向 jQueryUI Datepicker 添加时间选择器。

注意：请在工作文件夹中下载 jQuery Timepicker插件，并在 HTML 代码的 head 部分包含所需的文件。

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

    
        
        Adding a Timepicker to 
          jQuery UI Datepicker
  
        
            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;
            }
        
  
        
        
    
    
        
            Adding a Timepicker to
              jQuery UI Datepicker
            
                Add a simple jQuery 
                  UI datetimepicker
                
                    
                
            
        
        
      
        
      
        
      
  
        
            // Initialization of datetimepicker
            $(function () {
                $("#dateTimePicker").datetimepicker();
            });
        
    

输出：

向 jQuery UI Datepicker 添加时间选择器：在上面的 HTML 代码中，我们可以为“timeFormat”、“timezonelist”和本地化添加以下设置。程序员可以根据需要使用更多选项。

$(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
              );              
                  
            });

示例 2：下面的示例演示了带有小时、分钟和秒时间的步进时间间隔的滑块功能。请参阅输出以获得更好的理解。移动滑块后，它会按时间的选项设置中提到的时间间隔跳跃，如下所示。

注意：请不要忘记在滑块功能的 HTML 代码中包含以下库。

    
        
        Adding a Timepicker to
          jQuery UI Datepicker
  
        
            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;
            }
        
        
        
    
    
        
            Adding a step interval
              timepicker to jQuery UI Datepicker
            
                Adding slider with step
                 intervals for hour, minute and seconds
                
                    
                
            
        
        
      
        
      
        
      
        
      
        
      
  
        
            $(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
                });
            });
        
    

输出：

示例 3：以下示例演示为datetimepicker()添加下拉选择器。

    
        
        Adding a Timepicker to
          jQuery UI Datepicker
  
        
            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;
            }
        
  
        
        
    
    
        
            Adding a Timepicker to
              jQuery UI Datepicker
            
                Use of dropdowns in datetime picker
                
                    
                
            
        
        
      
        
      
        
      
  
        
            $(function () {
                $("#datePickerID").datetimepicker({
                    controlType: "select",
                    oneLine: true,
                    timeInput: true,
                    timeFormat: "hh:mm tt",
                });
            });
        
    

输出：