如何将timepicker添加到jQuery jtable？

Question

我在我的PHP站点中使用jQuery jTable来显示表并向表中添加记录/修改记录。

我有几个有时间值的字段。不幸的是，jTable只支持日期选择器，而不是时间选择器。任何人都可以建议如何将jQuery timepicker添加到jTable？

我试图在主JTable.js文件中添加一些JQuery时间选取器。但我认为我错误地添加了。由于我是新来的jQuery，我无法弄清楚如何添加JQuery的时间选择器插件

<div id="ShiftTableContainer" style="width: 600px;"></div> 
    <script type="text/javascript"> 

     $(document).ready(function() { 

      //Prepare jTable 
      $('#ShiftTableContainer').jtable({ 
       title: 'Shift', 
       actions: { 
        listAction: '../m/ShiftActions.php?action=list', 
        createAction: '../m/ShiftActions.php?action=create', 
        updateAction: '../m/ShiftActions.php?action=update', 
        deleteAction: '../m/ShiftActions.php?action=delete' 
       }, 
       fields: { 
        id: { 
         title: 'Shift Id', 
         width: '25%' 
        }, 
        name: { 
         title: 'Shift Name', 
         width: '40%' 
        }, 
        start_time: { 
         title: 'Start Time', 
         width: '75%', 
         input: function (data) { 
           var dt = data.record ? data.record.start_time : NULL; 
           return '<input type="text" style="width:200px" value="' + dt + '" />'; 
          } 
         inputClass: 'timepicker' 
        }, 

        end_time: { 
         title: 'End Time', 
         width: '75%', 

         //options: { '1': '101', '2': '102' } 
        }, 
        description: { 
         title: 'Description', 
         width: '75%' 
        }, 
        color: { 
         title: 'Color', 
         width: '75%', 
         //options: { '1': '101', '2': '102' } 
        }, 
        break_schedule: { 
         title: 'Break Schedule', 
         width: '75%', 
        } 
       } 

      }); 

      $('#ShiftTableContainer').jtable('load'); 
     }); 



    </script> 
      <script> 
      $(function(){ 
        $("input.timepicker").datetimepicker(); 
       });  

    </script> 

Answer 1

我想这样和它的工作的罚款。我更新了JQuery和JQuery UI到最新版本。与我使用的timepicker插件一起导入到我的php中。我在我的代码中做了一些修改。这是工作代码。

 <script type="text/javascript"> 

     $(document).ready(function() { 

      //Prepare jTable 
      $('#ShiftTableContainer').jtable({ 
       title: 'Shift', 
       actions: { 
        listAction: '../m/ShiftActions.php?action=list', 
        createAction: '../m/ShiftActions.php?action=create', 
        updateAction: '../m/ShiftActions.php?action=update', 
        deleteAction: '../m/ShiftActions.php?action=delete' 
       }, 
       fields: { 
        id: { 
         key: true, 
         edit: false, 
         title: 'Shift Id', 
         width: '25%' 
        }, 
        name: { 
         title: 'Shift Name', 
         width: '40%' 
        }, 
        start_time: { 
         title: 'Start Time', 
         width: '75%' 
        }, 

        end_time: { 
         title: 'End Time', 
         width: '75%' 
        }, 
        description: { 
         title: 'Description', 
         width: '75%' 
        }, 
        color: { 
         title: 'Color', 
         width: '75%', 
         //options: { '1': '101', '2': '102' } 
        }, 
        break_schedule: { 
         title: 'Break Schedule', 
         width: '75%', 
        } 
       }, 
       formCreated: function (event, data) 
       { 
        var $input_start_time = data.form.find ('input[name="start_time"]'); 
        $input_start_time.addClass("time"); 
        $input_start_time.timepicker(); 

        var $input_end_time = data.form.find ('input[name="end_time"]'); 
        $input_end_time.addClass("time"); 
        $input_end_time.timepicker(); 

       } 
      }); 

      $('#ShiftTableContainer').jtable('load'); 

     }); 



    </script> 

Answer 2

使用Timepicker插件，我还没有测试，但这个插件一个timepicker添加到jQueryUI的日期选择器。

http://trentrichardson.com/examples/timepicker/

Answer 3

使用 “输入” 栏（见http://www.jtable.org/ApiReference）为dateTimePicker的。将dateTimepicker绑定到您用于时间的每个文本输入，如下所示：

给所有时间输入相同的类（例如“timepicker”） - 请参阅上面api参考中的'inputClass'选项 - 然后扎timepicker这样的：

$(function(){ 
    $("input.timepicker").datetimepicker(); 
}); 

记住添加dateTimePicker script，并且还jQuery的以及jQuery用户界面之前（用户接口）库。

EDIT响应于评价：

设置上述timepicker代码外 JTable的代码的。对JTable，尝试这样的事情：

Time: { 
    title: 'Start Time', 
    input: function (data) { 
       var dt = data.record ? data.record.Time : ''; 
       return '<input type="text" style="width:200px" value="' + dt + '" />'; 
      } 
    inputClass: 'timepicker', 
etc. 

Answer 4

我最喜欢的时间选择是这样的jQuery用户界面timepicker：

http://fgelinas.com/code/timepicker/