editable with datepicker inside datatables?

d3vilr3d

Hi guys,

New to DataTables, I was able to initiate Editable in database and submit data with PHP into my database. Now, I'd like to use a datepicker in one of the columns. Can anyone point me to the right direction for this?

Any pointer would be greatly appreciated~

-william

TomC

Have you tried yet? Just using a class driven approach with jQuery UI's datepicker should work.
http://jqueryui.com/demos/datepicker/

mcjustin

I am successfully using jquery.jeditable.ui-datepicker.js* for this. When calling the editable(...), include:
"type": "datepicker"
You need not explicitly call datepicker() on these elements.

* available in the jeditable distro, in the "contributed" dir. Not much to it, but brevity is the soul of wit and I would have spent a couple numb hours doing this myself. Here's the source:

/* Create an inline datepicker which leverages the
jQuery UI datepicker
*/
$.editable.addInputType('datepicker', {
element: function(settings, original) {
var input = $('');

input.datepicker({
onSelect: function(dateText, inst) {
$(this).parents("form").submit();
}
});

$(this).append(input);
return (input);
}

Spotguide

You can achieve this a little easier by using fnDrawCallback.
[code]
$yourTable=$('#yourTable').dataTable( {
"fnDrawCallback":function(){ $('.showCalendar').datepicker()}
});
[/code]

Would add a datepicker to all elements in the table having the class name showCalendar

Evengers

Hi,

After much searching and experimenting .... I can't seem to get this. I am able to assign a datepicker control to every column or none. I can't see how to limit this to one or two (date) columns and leave the other columns as text.

I expect it is simply that I am putting the "type : datepicker" in the wrong line.

Any help would be much appreciated ... thanks in advance - Steven.



var oTable = $('#example').dataTable( {

"sDom": 'C<"clear">lfrtip',
"oColVis": {
"activate": "mouseover"
},
"aoColumnDefs": [
{ "sTitle": "My column title", "aTargets": [ 7 ] },
{ "sClass": "showCalendar", "aTargets": [ 7 ] },
{ "sClass": "time", "aTargets": [ 9 ] }
],
"bJQueryUI": true,
"bSortClasses": false,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "newserver_processing.php",
"sScrollY": 440,
"bScrollCollapse": true,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
},


"fnDrawCallback": function () {


$('td', this.fnGetNodes()).editable( 'neweditable_ajax.php', {

type: 'datepicker',


cancel: "Cancel",
tooltip: "Double-click to edit...",
"callback": function( sValue, y ) {
alert(this.parentNode.getAttribute('id'));
xclassName = this.className;

var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {

return {"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
}

} );

Evengers

P.S. I tried to find a way to use "Spotguides" suggestion without luck.


P.P.S. I am also using this code but I don't think this is the problem.



$.editable.addInputType('datepicker', {
element: function(settings, original) {

var input = $('');

input.datepicker({
onSelect: function(dateText, inst) {
$(this).parents("form").submit();
}
});

$(this).append(input);
return (input);
}
});

matv

I'm also working on this and have the same problem, seems like the datepicker is either on all columns or none, using very similar code to the one show, Did you find a solution to this at all? would be very interested to find out

Evengers

I switched to YUI2. It's now working very nicely.

Eric_DeCoff

Ok here is what I did to use jquery datepicker plugins ( Notice I use #pricing instead of #example)

[code]
$('#pricing').dataTable({
"aoColumnDefs": [ { "sClass": 'ui-datepicker-inline', "aTargets": [ 3,5 ] } ],
rest of your take setup here
});
[/code]

Next setup handling

[code]
// select everything when editing field in focus
$('#pricing tbody td input').live('focus', function (e){
$(this).select();
});

// attach datepicker on focus and format to return yy-mm-dd
$('#pricing tbody td.ui-datepicker-inline input').live('focus', function (e){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).datepicker("show");
});

// override normal blur function ( needed for date month switching )
$('#pricing tbody td input').live('blur', function (e){
return false;
});

// set change function to handle sumbit
$('#pricing tbody td.ui-datepicker-inline input').live('change', function (e){
$(this).parents("form").submit();
});

[/code]

allan

Good stuff - thanks for posting your solution :-).

Allan

jdawson

Thanks Eric_DeCoff ,

Your solution worked for me as well.

mcevikce

I have implemented the above solution but after choosing a new date from the datepicker my column
value is resetting to its original value. Any ideas?

roomm

thanks Eric_DeCoff, you save me!

watherton

Hi there i tried running this code and get the following error:

Unhandled exception at line 27, column 78 in http://localhost:52209/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.min.js

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'className': object is null or undefined

with this being highlighted in the js file within Visual Studio:

(m.className+=" "+e.sClass)

blockem

Hi Eric,
Thanks for the sample, your code worked fairly well for me with only one exception.
When I press the next prev month button it.
(As per this topic) http://datatables.net/forums/discussion/14115/json-loaded-table-with-jeditable-and-datepicker-jqueryui-problems-with-month-switch
I have set up a demo site www.as.net.au/default(3).asp
do you have the same problem?

If not, do you have any suggestions?

Thanks in advance

nicolas69

Hi,
Where do you put this part of code ?
[code]// select everything when editing field in focus
$('#pricing tbody td input').live('focus', function (e){
$(this).select();
});

// attach datepicker on focus and format to return yy-mm-dd
$('#pricing tbody td.ui-datepicker-inline input').live('focus', function (e){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).datepicker("show");
});

// override normal blur function ( needed for date month switching )
$('#pricing tbody td input').live('blur', function (e){
return false;
});

// set change function to handle sumbit
$('#pricing tbody td.ui-datepicker-inline input').live('change', function (e){
$(this).parents("form").submit();
});[/code]

Many thanks

blockem

Here
[code]
oTable = $('#YourTable').dataTable({

"fnDrawCallback": function() {
}
});
[/code]

nicolas69

Thanks for your answer. But i doesn't work for me. I have a lot of probleme making my datatable working perfectly.
If i put the code you give , i can't get my data???
i want a datepicker on column 4, 11 and 12.
Also i have a probleme with refreshing the table after editing inline. I have to refresh the page manually to see the change.
Any help with that code will be appreciated.
And sorry for my english.

here is my entire code [code]$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;

oSettings.fnServerData( oSettings.sAjaxSource, [], function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );

/* Got the data - add it to the table */
for ( var i=0 ; i

blockem

Hah!

change "exmaple" to "example" in you selectors :)

Terence

Hi folks,

I'm having some issues trying to add a Datepicker to my Datatables/JEditable element.
I followed the instructions but realized this topic was a bit old. There are some .live() methods which are not supported anymore so I simply tried to replace them with the .bind() method.
My debugger looks better but the datepicker is still not showing.

I would really appreciate if you could give me a hand.

Here's my code :
[code]

@import "../../Plugins/jQuery_UI/css/blitzer/jquery-ui-1.10.3.custom.min.css";






$(document).ready(function() {
/* Init DataTables */
var oTable = $('.table-admin').dataTable( {
"aoColumnDefs": [ { "sClass": 'ui-datepicker-inline', "aTargets": [ 3 ] } ],
"bPaginate": false,
"fnDrawCallback": function() {
// select everything when editing field in focus
$('.table-admin tbody td input').bind('focus', function (e){$(this).select();});

// attach datepicker on focus and format to return yy-mm-dd
$('.table-admin tbody td.ui-datepicker-inline input').bind('focus', function (e){
$(this).datepicker({ dateFormat: 'yyyy-mm-dd' }).datepicker("show");
});

// override normal blur function ( needed for date month switching )
$('.table-admin tbody td input').bind('blur', function (e){
return false;
});

// set change function to handle sumbit
$('.table-admin tbody td.ui-datepicker-inline input').bind('change', function (e){
$(this).parents("form").submit();
});
}

//"sDom": '<"top"f><"autre"i>'
});

/* Apply the jEditable handlers to the table */
$('td.edit', oTable.fnGetNodes()).editable( 'editable_ajax.php', {
tooltip : 'Cliquez pour éditer...',
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},

"submitdata": function ( value, settings ){
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
});

});

[/code]

Safari's and Chrome's tools don't give any warning.
Everything works fine except that there's no datepicker when editing column 3.

Thank you a lot in advance, and congratulations for the great work.