Problem w/ Dates During Inline Editing
Problem w/ Dates During Inline Editing
ryan.sweeney
Posts: 1Questions: 1Answers: 0
Hello, I’m currently having some trouble with the editor specific to inline editing of date/datetime types. Basically what I’m noticing is that while data is coming back from the server loaded and formatted as desired in the dataTable, the Editor is not respecting the value for dates unless I use the datePicker. And even again after the date from the datePicker will be submitted successfully when it is read later it is still not being respected.
Versions: DataTables 1.10.13 & DataTables Editor v1.6.4
I’ve attached screenshots of everything I could think of as well as what basically amounts to the source code.
Start Date Displayed Properly:
Edit Any Field:
The Value of StartDate in PreSubmit is an empty string:
Additional Information:
This is how the date is coming back from the server:
If the editor fields type is date, when I click the cell that has a date it changes the date to mm/dd/yyyy. This is not desired because if the user just wanted to tab through to the next field I’d like the original date to be preserved.
If the editor fields type is set to datetime, when I click the cell it’s populating the cell w/ the unformatted date result from the server: “/Date(15053….)/”. Also when this happens and the data is submitted this value is set in the preSubmit but on the server I am still seeing 01/01/0001
Chrome Dev Tools:
MVC Controller:
Validation:
I will no doubt run into another issue w/ the _deepCompare comparing an empty string for EndDate with null which is going to cause an undesired submit. Any advice there would be greatly appreciated.
Any assistance would be greatly appreciated, please bear in mind that I’ve been trying a number of solutions for over a week now so there may be some convoluted code that I don’t need in there at all.
Thanks
Source Code:
self.metricGrid = null;
self.page = 0;
var selectedMetric = null;
var selectedMetricRow = null;
self.metrics = null;
self.editor = new $.fn.dataTable.Editor({
ajax: { url: ROOT_URL + '/url' },
table: '#tblMetric',
idSrc: 'Id',
fields: [
{ data: 'Id', name: 'Id', className: 'hidden'},
{
type: 'select',
label: 'Metric',
name: 'MetricId',
editField: 'MetricId',
"options": self.metrics,
"optionsPair": {
label: 'Name',
value: 'Id'
}
},
{
label: 'Size',
name: 'MetricSize',
width: '10',
editField: 'MetricSize',
def: 0
},
{
type: 'datetime',
label: 'Start Date',
name: 'StartDate',
editField: 'StartDate',
format: 'M/D/YYYY',
width: '10'
},
{
type: 'datetime',
label: 'End Date',
name: 'EndDate',
editField: 'EndDate',
width: '10',
def: null
},
{
label: 'FacilityId',
name: 'FacilityId',
className: 'hidden'
}
]
});
self.metricGrid = $container.find('#tblMetric')
.DataTable({
dom: "<'row'<'col-sm-6'B><'col-sm-3'l><'col-sm-3'f>>rt<'row'<'col-sm-6'i><'col-sm-6'p>>",
ajax: {
cache: false,
method: 'GET',
url: ROOT_URL + '/url',
data: {
facilityId: facilityId
},
showLoadingImage: true,
dataSrc: ''
},
initComplete: function (data) {
if (!hasMasterClass) {
self.metricGrid.buttons(['input[text="Add Metrics"]']).enable(
self.metricGrid.rows({ selected: true }).indexes().length === 0 ?
false :
true
);
}
fillMetrics();
},
order: [0, 'asc'],
scrollX: true,
select: 'single',
paging: true,
columns: [
{ data: 'Id', className: 'hidden' },
{
title: 'Metric',
data: 'MetricName',
name: 'MetricName',
editField: 'MetricId',
width: '275'
},
{
title: 'Size',
data: 'MetricSize',
name: 'MetricSize',
width: '10'
},
{
title: 'Start Date',
data: 'StartDate',
name: 'StartDate',
width: '10',
render: function (data) {
return data !== null ? moment(data).format("MM/DD/YYYY") : null;
}
},
{
title: 'End Date',
data: 'EndDate',
name: 'EndDate',
width: '10',
render: function (data) {
return data !== null ? moment(data).format("MM/DD/YYYY") : null;
}
},
{
data: 'MetricId',
name: 'MetricId',
visible: false
},
{
data: 'FacilityId',
name: 'FacilityId',
visible: false
}
],
ordering: true,
keys: {
keys: [9],
editor: self.editor
},
buttons: [
{ extend: 'create', editor: self.editor, className: 'btn btn-primary btn-margin-right gridBtn', text: 'Manual Add' },
{
editor: self.editor,
className: 'btn btn-primary btn-margin-right gridBtn',
text: 'Add Metrics',
action: function (e, dt, node, config) {
autoLoadMetrics();
}
},
{
editor: self.editor,
className: 'btn btn-danger disabled gridBtn',
text: 'Delete',
id: 'btnDeleteMetric',
action: function (e, dt, node, config) {
deleteMetric();
}
}
]
});
self.metricGrid.on('click',
'tbody td',
function (e) {
self.editor.inline(this,
{
onBlur: 'submit',
submit: 'allIfChanged'
});
});
// This method handles the tabbing functionality
self.metricGrid.on('key-focus',
function (e, datatable, cell) {
self.editor.inline(cell.index(),
{
onBlur: 'submit',
submit: 'allIfChanged'
});
});
self.editor.on('preSubmit',
function (e, data, action) {
data.FacilityId = facilityId;
var metric = $.grep(self.metrics,
function (object) {
return object.Id === data.MetricId;
});
data.MetricName = metric[0].Name;
});
Answers
Its not the main issue, but
format: 'M/D/YYYY',should probably useMM/DD/YYYYto have leading zeros since that appears to be used elsewhere.The main issue is the format being returned from the server:
What you need is for the server to be sending data in the same format as Editor is expecting (i.e. MM/DD/YYYY in this case).
Are you using the Editor .NET libraries? If so the date and time formatters are the way to do this.
Allan
Hi Allan,
I have the similar problem. my MVC is sending json fomat ( like /Date(... ). I will be converting the date to DD MMM YYYY via javascript with render function.
the InLine editor has the same format. But if the field is not modified, i am getting Null value
INR
Since the original post, the
datetimehas two new options:displayFormatandwireFormat- you can use those to convert the dates into the required format.Colin
i solved this problem by checking the date format if it has /Date(.. then convert the json to normal date form..
Regards
INR