如何將時間戳添加到jquery jtable？

Question

我在我的PHP站點中使用jQuery jTable來顯示表並向表中添加記錄/修改記錄。

我有幾個有時間值的字段。 不幸的是，jTable僅支持日期選擇器，而不支持時間選擇器。 任何人都可以建議如何將jQuery timepicker添加到jTable？

我試圖在主JTable.js文件中添加一些JQuery Time Picker。 但我想我錯了。 由於我是jquery的新手，我無法弄清楚如何添加JQuery Time Picker插件

   <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更新到最新版本。 在我的php中導入它以及我正在使用的timepicker插件。 我在代碼中做了一些修改。 這是工作代碼。

        <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 Addon，我還沒有測試，但是這個插件為jQueryUI Datepicker添加了一個時間戳。

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

Answer 3

使用“輸入”字段（請參閱http://www.jtable.org/ApiReference ）獲取dateTimePicker。 將dateTimepicker綁定到您用於時間的每個文本輸入，如下所示：

給所有時間輸入相同的類（例如“timepicker”） - 參見上面的api引用中的'inputClass'選項' - 然后將timepicker綁定如下：

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

記得添加dateTimePicker腳本 ，之前還要添加jQuery以及jQuery UI（用戶界面）庫。

編輯回應評論：

在jtable代碼之外設置上面的timepicker代碼。 對於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 UI timepicker：

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