Trying to use datepicker in one of the columns on my datatable

jjonkers

Here is the code I have so far ? What am I doing wrong ?

var table = document.getElementById("tblLateArrival");
if ($.fn.DataTable.fnIsDataTable(table)) {

$("#tblLateArrival").dataTable().fnClearTable();
$("#tblLateArrival").dataTable().fnDestroy();
}

var jsonData = $.parseJSON(data);
$("#tblLateArrival").dataTable({
"bProcessing": true,
"bFilter": false,
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"activate": "mouseover",
"aaData": jsonData["aaData"],
"aoColumns": [{ "sTitle": "Number" },
{ "sTitle": "Cutoff Date", "sClass": 'ui-datepicker-inline', "aTargets": [2] },
{ "sTitle": "Cutoff Time", "sClass": 'ui-timepicker-inline', "aTargets": [3] },
{ "sTitle": "Booking" },
{ "sTitle": "Position" },
{ "sTitle": "Update Status" },
{ "sTitle": "Action" },
{ "sClass": "Gkey", "sTitle": "", "bVisible": true, "width": 0, "bVisible": false }
],
"aTargets": [2, 3],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
//this code is working
//iterate over all tds of this row and apply title
for(var a=0, i=aData.length; a < i; a++){
var title = aData[a];
$(nRow).children("td").attr("title", title);
}
return nRow;
},
"fnInitComplete": function() {
// Apply the tooltips
//this does not work for all tds
$( top100sTable.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
},
/*"aoColumnDefs": [
{
"fnRender": function (oObj) {
return formatTableCell(oObj);
},
"aTargets": ["_all"]
}
],*/
"fnCreatedRow": function (nRow, aData, iDisplayIndex) {
$(nRow).find(".row-remove").click(function (e) {
var msg = "Are you sure you want to remove " + $(nRow).children(":nth-child(1)").text() + " from the Late Arrival Container List?";
var div = $("" + msg + "");
var bFlag = 0;
div.dialog({
title: "Confirm",
buttons: [
{
autoOpen: true,
//modal: false,
text: "Yes",
click: function () {
if ($(nRow).children(":nth-child(1)").text() == "") {
$(table).dataTable().fnDeleteRow(nRow);
e.stopImmediatePropagation();
div.dialog("close");
return;
}
else {
url = baseURL + "VITTerminalAccess/UpdateLateArrival.aspx" + "?Action=delete&Container=" + $(nRow).children(":nth-child(1)").text() + '&Gkey=' + $(nRow).children(":nth-child(8)").text();
$.ajax({
async: false,
url: baseURL + "VITTerminalAccess/UpdateLateArrival.aspx",
data: { "Action": "delete", "Container": $(nRow).children(":nth-child(1)").text(), "Gkey": $(nRow).children(":nth-child(8)").text() }
}).done(function (data) {
if (handleErrorsInResponse(data))
e.stopImmediatePropagation();

if (data.indexOf("Success") >= 0) {
generateSuccessMessage(data, $("#tab_1_1").parent().next());
$(table).dataTable().fnDeleteRow(nRow);
e.stopImmediatePropagation();
div.dialog("close");
return;
}
else { // Error
generateSuccessMessage(data, $("#tab_1_1").parent().next());
e.stopImmediatePropagation();
div.dialog("close");
return;
}
});
}
}
},
{
text: "No",
click: function () {
e.stopImmediatePropagation();
div.dialog("close");
return;
}
}
]
});
});

var editable = [4, 5, 6, 7, 8]; // Referring to Non Editable fields. Position, Action and Update Status as Not Editable.
onRowCreated("#tblLateArrival", nRow, editable, 1);
},
"fnInitComplete": function (oSettings, json) {
$(this).width("");
},
"fnDrawCallback": function () {
//$('.ui-datepicker-inline').datepicker();
// select everything when editing field in focus
$('#tblLateArrival tbody td input').bind('focus', function (e) { $(this).select(); });

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

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

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

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

tangerine

It would help if you explained what the problem is.

allan

And linked to a test case so we can see the code running.

Allan

jjonkers

Thanks Allan,

I've created a test account to login to our test website.

http://apps.versiant.com/LynxN4/
You can click this link to login with userid:

The page you will navigate to is the "Late-arrival.aspx"

Login with userid: "testuser1" and I will give you the password
by email: jerry.jonkers@gmail.com

I have used datepicker on input boxes outside of the grid, but I'm having trouble getting the sample code on the site to work.

When you login click "Equipment" and "Late Arrival" menu options and it will take you to the page.

Then you can select Vessel "PAULS SHIP" and Voyage "0424" from the dropdowns and press "Search" button.

The grid will show up and the Cut off date should popup to be a datepicker. Currently it is only editable and the time is too. I was wondering if the grid allows a timepicker too ?

That is the next column over.

You should see the javascript file where all the grid code is. The javascript file: late-arrival.js

You can use F12 to debug the code.

Jerry

jjonkers

Allan - You can send me message to my inbox on datatables.net too. Then I'll reply with the password just to you on this site.

Jerry