TimePicker plugin for Editor

burnchar

I've written a plugin for Editor based on Trent Richardson's popular TimePicker. It's an extension to jQueryUI's DatePicker which supports time, time zones, etc. You can find it here: http://trentrichardson.com/examples/timepicker/

[code]
$.fn.dataTable.Editor.fieldTypes.dateTime = {
/*
* Requires jQuery UI, DatePicker, and Trent Richardson's TimePicker: http://trentrichardson.com/examples/timepicker/ (including CSS)
*/
"create": function (conf) {
conf._input = $('').attr($.extend({
id: conf.id
}, conf.attr || {}));

// Default time/date format is standard ISO-8601. See http://en.wikipedia.org/wiki/ISO_8601
if(!conf.dateFormat) conf.dateFormat = $.datepicker.ISO_8601;
if(!conf.timeFormat) conf.timeFormat = 'HH:mm:ssZ';
if(!conf.separator) conf.separator = 'T';
if (!conf.showTime) conf.showTime = true;
if (!conf.dateImage) {
conf.dateImage = "content/images/calendar.gif";
}

setTimeout(function () {
$(conf._input).datetimepicker({
// JUI DatePicker options
showOn: "both",
buttonImage: conf.dateImage,
buttonImageOnly: true,
dateFormat: conf.dateFormat,
changeMonth: true,
changeYear: true,

// TimePicker options. See http://trentrichardson.com/examples/timepicker/
timeFormat: conf.timeFormat,
separator: conf.separator,
showTime: conf.showTime
});
$('#ui-timepicker-div').css('display', 'none');
}, 10);

return conf._input[0];
},
[/code]


Usage is just like the built-in DatePicker plugin for editor, but with new options for time:
[code]
$(document).ready(function () {
$("input#sometable").focus();
editor = new $.fn.dataTable.Editor({
"ajaxUrl": {
"create": "POST @Url.Content("~/API/ReticleDatabaseCrud")",
"edit": "PUT @Url.Content("~/API/ReticleDatabaseCrud")",
"remove": "DELETE @Url.Content("~/API/ReticleDatabaseCrud")"
},
"dbTable": "somedbtable",
"domTable": "#somedomtable",
"fields": [
{ "name": "name", "label": "Your name?" },
{ "name": "favday", "label": "Your favorite date:", "type": "dateTime", "timeFormat": 'HH:mmZ' }
],
... Other Editor options ...
});
[/code]
Look at the source for options, but briefly you can specify: dateFormat, timeFormat, separator (between date and time), showTime (if false, this plugin is the same as DatePicker), dateImage (path to calendar icon).

By default, the date/time is displayed in the international standard date format, ISO-8601.

allan

Nice one! Thanks very much for sharing this with us :-)

Allan

skybot

Hi i have one question about this plugin.

this is my code

[code]


/*
* Editor client script for DB table EVENTS
* Automatically generated by http://editor.datatables.net/generator
*/


(function($){




var test1= new Array({"label" : "a", "value" : "a"});
var test2= new Array({"label" : "a", "value" : "a"});

function loader1(){
test1.splice(0,1);
$.ajax({
url: "assets/php/get_rooms.php",
async: false,
dataType: 'json',
success: function (json) {
for(var a=0;a