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>
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>
- The order of the scripts are important. Make sure you add the jquery library first. Then, the timepicker code must be called inside a document.ready function. Use Firefox's Error Console to see if you get any javascript errors. – Stefan Commented Oct 11, 2012 at 6:22
4 Answers
Reset to default 1I 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>
Use the Timepicker Addon, I have not tested yet but this plugin add a timepicker to the jQueryUI Datepicker.
http://trentrichardson./examples/timepicker/
Use the "input" field (see http://www.jtable/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 ment:
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.
My favorite time picker is this jQuery UI timepicker:
http://fgelinas./code/timepicker/