如何將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/