Ok so I have this datatable with around 90 fields being populated from a dbContext (Visual Studio MVC4). I added the .makeEditable() to enjoy inline editing...
Most of my fields are of a type string (but a user CAN input a date if he opts to....even though its a text type field, the date will be input as simple text..)
The problem I have is that even though I'm successfully being able to get the class of the edit form to become "datepicker", the calender isn't popping up and on other simple non-datatable pages, it runs just fine.
I want to be able to set certain column cells to have inline datepicking ability..
I want my table to look like this thing http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit-extra.html
I tried mimic-ing the code there but with no success....its always a textbox for editing instead of a calender view..
UPDATE: I noticed that if I change the "type:" field in
$.fn.editable.defaults = {
name: 'value',
id: 'id',
type: 'datepicker',
width: 'auto',
height: 'auto',
event: 'click.editable',
onblur: 'cancel',
loadtype: 'GET',
loadtext: 'Loading...',
placeholder: 'Double-Click to edit',
loaddata: {},
submitdata: {},
ajaxoptions: {}
};
My entire table gets a datepicker on editing mode...
Apparently the intializing code to give certain columns datepicker options doesn't work as it should ....or at least I guess so
**UPDATE END****
This is my datatable initialization code:
<script language="javascript" type="text/javascript">
$(function() {
$(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
});
$(document).ready(function ()
{
$('#myDataTable thead tr#filterrow th').each(function () {
var title = $('#myDataTable thead th').eq($(this).index()).text();
$(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" />');
});
$("#myDataTable thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
var table = $('#myDataTable').DataTable({
//"scrollY": "200",
"scroller": "true",
"deferRender": "true",
"orderCellsTop": "true",
"columnDefs": [
{ "visible": false, "targets": 1 },
{ "type": "datepicker", "aTargets": [6,7,8,9,10] },
{ 'sClass':"datepicker", "aTargets": [6, 7, 8, 9, 10] }
],
"order": [[1, 'asc']],
"displayLength": 25,
"drawCallback": function (settings)
{
$(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(1, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td colspan="88">' + group + '</td></tr>'
);
last = group;
}
});
},
"fndrawCallback": function (settings) {
$(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
}
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.header()).on('keyup change', function () {
that
.search(this.value)
.draw();
});
});
// Order by the grouping
$('#myDataTable tbody').on('click', 'tr.group', function () {
var currentOrder = table.order()[0];
if (currentOrder[0] === 1 && currentOrder[1] === 'asc') {
table.order([1, 'desc']).draw();
}
else {
table.order([1, 'asc']).draw();
}
});
//$('#myDataTable thead').append($('#myDataTable thead tr:eq(0)')[0]);
$('#myDataTable').dataTable().makeEditable({
"aoColumnDefs": [
{ "type": "hasDatepicker", "aTargets": 4 },
{ "sClass": "hasDatepicker", "aTargets": 4 }
]
});
});
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
this is the datepicker.js
// add :focus selector
jQuery.expr[':'].focus = function (elem) {
return elem === document.activeElement && (elem.type || elem.href);
};
$.editable.addInputType(' datepicker', {
/* create input element */
element: function (settings, original) {
var form = $(this),
input = $('class ="datepicker" <input />');
// input.attr('class', 'datepicker');
input.attr('autocomplete', 'off');
form.append(input);
return input;
},
/* attach jquery.ui.datepicker to the input element */
plugin: function (settings, original) {
var form = this,
input = form.find("input");
// Don't cancel inline editing onblur to allow clicking datepicker
settings.onblur = 'nothing';
datepicker = {
onSelect: function () {
// clicking specific day in the calendar should
// submit the form and close the input field
form.submit();
},
onClose: function () {
setTimeout(function () {
if (!input.is(':focus')) {
// input has NO focus after 150ms which means
// calendar was closed due to click outside of it
// so let's close the input field without saving
original.reset(form);
} else {
// input still HAS focus after 150ms which means
// calendar was closed due to Enter in the input field
// so lets submit the form and close the input field
form.submit();
}
// the delay is necessary; calendar must be already
// closed for the above :focus checking to work properly;
// without a delay the form is submitted in all scenarios, which is wrong
}, 150);
}
};
if (settings.datepicker) {
jQuery.extend(datepicker, settings.datepicker);
}
input.datepicker(datepicker);
}
});
