CODEWITHSUNDEEP
phpjavascriptjqueryjtable
Allen
Allen

Reputation: 681

How to add timepicker to jquery jtable?

I am using jQuery jTable in my PHP site to display table and to add a record / modify a record to the table.

I have few fields which have time values. Unfortunately jTable supports only a datepicker, not a timepicker. Can anyone suggest how to add jQuery timepicker to the jTable?

I tried to add few JQuery Time Picker in the main JTable.js file. But I Think i'm adding wrongly. Since i'm new to jquery, i can't figure out how to add the JQuery Time Picker Plugin

   <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>

Upvotes: 3

Views: 8396

Answers (4)

Allen
Allen

Reputation: 681

I tried like this and its working fine. I updated JQuery and JQuery UI to the latest version. Imported it in my php along with the timepicker plugin i am using. I did some modification in my code. Here is the working code.

        <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>

Upvotes: 1

Paul Grimshaw
Paul Grimshaw

Reputation: 21034

My favorite time picker is this jQuery UI timepicker:

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

Upvotes: 0

Stefan
Stefan

Reputation: 3900

Use the "input" field (see http://www.jtable.org/ApiReference) for the dateTimePicker. Tie the dateTimepicker to each text input that you use for time, like this:

Give all the time inputs the same class (ex. "timepicker") - see 'inputClass' option from the above api reference' - and then tie the timepicker like this:

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

Remember to add the dateTimePicker script, and before that also the jQuery as well as jQuery UI (User Interface) libraries.

EDIT in response to comment:

Setup the above timepicker code outside of the jtable code. For the jtable, try something like this:

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.

Upvotes: 0

bjvilory
bjvilory

Reputation: 586

Use the Timepicker Addon, I have not tested yet but this plugin add a timepicker to the jQueryUI Datepicker.

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

Upvotes: 0

Related Questions