datapicker doesn't appear in editor modal

datapicker doesn't appear in editor modal

FicosFicos Posts: 38Questions: 13Answers: 0

testpage on

Creating a new record ('nieuw') doesn't show the datepicker in the modal, but in the mainscreen.

    setlocale(LC_ALL, 'nl_NL');
<!DOCTYPE html> 
<html lang="en">


  <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=",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">

<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 class="card-body">
              <div class="table-responsive">
                <table class="table table-bordered" id="urenStef" width="100%" cellspacing="0">

        </div>  <!-- /.container-fluid -->
      </div>    <!-- End of Main Content -->
    </div>      <!-- End of Content Wrapper -->
  </div>        <!-- End of Page Wrapper -->

  <!-- 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/"></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=""></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>


and the javascript file:

/* * Editor client script for DB table urenStef * Created by */ (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.


  • colincolin Posts: 8,013Questions: 0Answers: 1,348

    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.



  • FicosFicos Posts: 38Questions: 13Answers: 0
    edited September 2019

    Goodmorning @colin

    Thank you, that helped!


Sign In or Register to comment.