datapicker doesn't appear in editor modal
datapicker doesn't appear in editor modal
Hi,
testpage on http://oostveen-advies.eu/test/index.html
Creating a new record ('nieuw') doesn't show the datepicker in the modal, but in the mainscreen.
<?php
setlocale(LC_ALL, 'nl_NL');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Ficos B.V.">
<title>uren Stef Vrijsen</title>
<!-- Custom fonts for this template -->
<link href="../nl/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../nl/css/sb-admin-2.min.css" rel="stylesheet">
<!-- Custom styles for this page -->
<link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/DataTables-1.10.18/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Buttons-1.5.6/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../nl/library_v3/dataTables-1.10.18/Select-1.3.0/css/select.dataTables.min.css">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">uren Stef Vrijsen</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="urenStef" width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th>datum</th>
<th>aanvang</th>
<th>einde</th>
<th>tijd</th>
<th>werkzaamheden</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div> <!-- /.container-fluid -->
</div> <!-- End of Main Content -->
</div> <!-- End of Content Wrapper -->
</div> <!-- End of Page Wrapper -->
</body>
<!-- Bootstrap core JavaScript-->
<script src="../nl/library_v3/jquery-3.3.1.min.js"></script>
<script src="../nl/library_v3/bootstrap-4.1.3/js/bootstrap.min.js"></script>
<script src="../nl/library_v3/moment/moment.js"></script>
<!-- Page level plugins -->
<script src="../nl/library_v3/dataTables-1.10.18/datatables.js"></script>
<script src="../nl/library_v3/dataTables-1.10.18/DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="../nl/library_v3/dataTables-1.10.18/Buttons-1.5.6/js/dataTables.buttons.min.js"></script>
<script src="../nl/library_v3/dataTables-1.10.18/Select-1.3.0/js/dataTables.select.min.js"></script>
<script src="../nl/library_v3/Editor-PHP-1.9.0/js/dataTables.editor.min.js"></script>
<script src="../nl/library_v3/Editor-PHP-1.9.0/js/editor.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nl.js"></script>
<script src="../nl/library_v3/js/datetime-moment.js"></script >
<script src="../nl/vendor/ckeditor5-build-classic/ckeditor.js"></script>
<!-- Custom scripts for all pages-->
<script src="../nl/js/sb-admin-2.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/table.urenStef.js"></script>
</html>
and the javascript file:
/*
* Editor client script for DB table urenStef
* Created by http://editor.datatables.net/generator
*/
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.urenStef.php',
table: '#urenStef',
fields: [
{ "label": "datum:",
"name": "datum",
type: 'datetime',
def: function () { return new Date(); },
format: 'DD-MM-YYYY',
opts: {
showWeekNumber: true,
}
},
{
"label": "aanvang",
"name": "tijd_s",
"type": "datetime",
"format": "HH:mm"
},
{
"label": "einde",
"name": "tijd_e",
"type": "datetime",
"format": "HH:mm"
},
{
"label": "werkzaamheden:",
"name": "werk"
}
],
i18n: {
create: {
button: "nieuw",
title: "iets nieuws toevoegen",
submit: "bewaar"
},
edit: {
button: "wijzigen",
title: "een regel wijzigen",
submit: "bijwerken"
},
remove: {
button: "verwijder",
title: "regel verwijderen",
submit: "bevestig",
confirm: {
_: "Weet u zeker om %d te verwijderen?",
1: "Deze regel 1 verwijderen?"
}
}
}
} );
var table = $('#urenStef').DataTable( {
dom: 'Bfrtip',
language: {"url": "../nl/library_v3/dataTables.dutch.txt"},
ajax: 'php/table.urenStef.php',
"order": [0,'desc'],
columnDefs: [
{ "visible": false, "targets": [0] }
],
columns: [
{data: "id"},
{
"data": "datum"
},
{
"data": "tijd_s"
},
{
"data": "tijd_e"
},
{data: "tijd"},
{
"data": "werk"
}
],
select: true,
lengthChange: false,
buttons: [
{ extend: 'create', text: '<i class="fas fa-plus"></i> nieuw', editor: editor },
{ extend: 'edit', text: '<i class="fas fa-edit"></i> wijzig', editor: editor },
{ extend: 'remove', text: '<i class="fas fa-minus"></i> verwijder', editor: editor },
{ extend: 'print', text: '<i class="fas fa-print"></i> printen'}
]
} );
} );
}(jQuery));
It should be possible but I can't see how.
Thanks.
This discussion has been closed.
Answers
Hi @Ficos ,
It doesn't look like you're including the file
editor.bootstrap4.min.css- could you verify that, please. I compared your sources with this example here.Cheers,
Colin
Goodmorning @colin
Thank you, that helped!
Jan