Problem with date fields
Problem with date fields
projektmce
Posts: 9Questions: 4Answers: 0
Hi Alan,
I use your editor (a very great tool!!!) and have a problem with date fields (datepicker).
For testing I modified the example "inline-editing/simple.html".
The data from the database are shown correctly. If I click in a date field the datepickers open ut with a wrong date.
Do you have an idea what the reason could be?
And if I put in a date in the datepicker it is not saved in the database...?
Thanks a lot
Michael
My codes are the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Editor example - Simple inline editing</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.12.1.custom/jquery-ui.min.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="../../js/moment-with-locales.min.js"></script>
<script type="text/javascript" language="javascript" src="../../js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/dataRender/datetime.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
var auftragid = 574;
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function(){
//
$.datepicker.setDefaults({
dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
changeMonth: true,
changeYear: true
});
//
editor = new $.fn.dataTable.Editor({
//
ajax: "../php/staff.php?aid=" + auftragid,
table: "#example",
fields: [{
label: "Probennummer:",
name: "PRNR_ZAHL"
}, {
label: "Schlagnummer:",
name: "SCHLNR"
}, {
label: "Schlagname:",
name: "SCHLNAME"
}, {
label: "Gezogen am:",
name: "Gezogen_am",
type: "date",
def: function(){ return new Date(); },
dateFormat: "dd.mm.yy"
}, {
label: "Gezogen von:",
name: "Gezogen_von"
}, {
label: "Probe vorhanden:",
name: "Probe_vorhanden"
}, {
label: "Laborabgabe_am:",
name: "Laborabgabe am",
type: "datetime"
}, {
label: "Bemerkungen:",
name: "Bemerkungen"
}
]
} );
// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "../php/staff.php?aid=" + auftragid,
order: [[ 2, 'asc' ]],
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "PRNR_ZAHL" },
{ data: "SCHLNR" },
{ data: "SCHLNAME" },
{ data: "Gezogen_am",
render: function(data, type, row){
//
if (row.Gezogen_am == '0000-00-00'){
return '';
}
else {
return (moment(data).format("DD.MM.YYYY"));
}
}
},
{ data: "Gezogen_von" },
{ data: "Probe_vorhanden" },
{ data: "Laborabgabe_am",
render: function(data, type, row){
//
if (row.Laborabgabe_am == '0000-00-00'){
return '';
}
else {
return (moment(data).format("DD.MM.YYYY"));
}
}
},
{ data: "Bemerkungen" }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>Editor example</h1>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Probennummer</th>
<th>Schlagnummer</th>
<th>Schlagname</th>
<th>gezogen am</th>
<th>gezogen von</th>
<th>Probe vorhanden</th>
<th>Laborabgabe am</th>
<th>Bemerkungen</th>
</tr>
</thead>
</table>
</section>
</div>
</body>
</html>
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include( "../../php/DataTables.php" );
$auftragid = $_REQUEST['aid'];
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'dBase', "dBaseID" )
->fields(
Field::inst( 'PRNR_ZAHL' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'Probennummer wird benötigt' )
) ),
Field::inst( 'SCHLNR' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'Schlagnummer wird benötigt' )
) ),
Field::inst( 'SCHLNAME' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'Schlagname wird benötigt' )
) ),
Field::inst( 'Gezogen_am' )
->getFormatter(function($val, $data, $opts){
if (is_null($val)){
return '0000-00-00';
}
else {
return $val;
}
})
->setFormatter('Format::date_format_to_sql', 'yyyy-mm-dd'),
Field::inst( 'Gezogen_von' ),
Field::inst( 'Probe_vorhanden' ),
Field::inst( 'Laborabgabe_am' ),
Field::inst( 'Bemerkungen' )
)
->where ('AuftragID', $auftragid)
->process( $_POST )
->json();
This discussion has been closed.
Answers
If you use the i18n settings for Editor you don't need to make any further changes to the date picker. It works automatically if you use field type "datetime". Here are my settings for German. This has to execute before your Editor instance gets initialized.
This is for Data Tables which might also be helpful:
If you use this your pages should work ok for English and German.
This is a sample field definition:
Hi rf1234,
thanks a lot. I will try it.
Michael