Mudahnya Menampilkan DateTimePicker di Custom Files pada PHPMaker 2021

Hari ini kita akan membuktikan betapa mudahnya untuk menampilkan control DateTimePicker di Custom Files pada PHPMaker 2021. Sekitar 4 tahun yang lalu hal ini sudah pernah kita bahas melalui artikel Begini Mudahnya Menampilkan DatePicker JSCalendar di Custom Files PHPMaker.

Tentu saja kode yang digunakan sekitar 4 tahun lalu tidak bisa digunakan di PHPMaker 2021. Alasan utamanya adalah karena saat itu PHPMaker menggunakan extension JSCalendar, sedangkan di PHPMaker 2021, menggunakan extension DateTimePicker.

Untuk mencoba di PHPMaker 2021, Anda bisa menggunakan project demo yang sudah disediakan oleh PHPMaker. Pastikan kita sudah mengaktifkan extension DateTimePicker dari menu Tools -> Extensions.

Setelah itu, pastikan Anda sudah membuat sebuah Custom File baru. Jika belum tahu caranya, baca topik Custom Files di menu Help PHPMaker, atau cari artikel saya di situs ini dengan kata kunci topik tadi.

Perlu diketahui, bahwa pengaturan Include common files harus diaktifkan untuk Custom File tadi. Artinya, kita ingin menggunakan object Form yang sudah disediakan oleh PHPMaker 2021, daripada membuat object Form sendiri yang justru akan mempersulit situasi.

Selanjutnya, salin kode berikut ke bagian Content dari Custom File yang sudah Anda buat tadi.

<script>
  var currentForm, currentPageID;
  var my_form;
  loadjs.ready("head", function () {
    var $ = jQuery;
    // Form object
    currentPageID = ew.PAGE_ID = "custom";
    my_form = currentForm = new ew.Form("my_form", "custom");
    // load the form
    loadjs.done("my_form"); // <--- don't forget this!
  });
</script>

<form id="my_form" name="my_form" class="form-horizontal">
    <div id="r_my_date" class="form-group row">
        <label for="my_date" class="col-sm-2 control-label ew-label">Please select a Date</label>
        <div class="col-sm-10">
          <span id="el_my_date">
          <input type="text" id="my_date" name="my_date" data-field="my_date" data-format="9" size="20" class="form-control">
          <script type="text/javascript">
             loadjs.ready(["my_form", "datetimepicker"], function() {
               ew.createDateTimePicker("my_form", "my_date", {"ignoreReadonly": true, "useCurrent": false, "format": 1});
             });
          </script>
          </span>
        </div>
    </div>
</form>

Perhatikan kode Javascript yang berada di bagian atas. Kode itu wajib ada, supaya kita dapat menggunakan object Form yang sudah tersedia di PHPMaker 2021, dengan menggunakan kode new ew.Form(). Mengapa? Karena kita mengaktifkan pengaturan Include common files.

Kita juga harus memuat form menggunakan loadjs.done() Jika itu tidak ada, maka DateTimePicker tidak dapat ditampilkan.

Untuk format tanggal yang kita gunakan di contoh tersebut adalah 1, yang artinya adalah tanggal lengkap dengan format Tahun-Bulan-Tanggal Jam:Menit:Detik. Untuk separator tanggal dan jam, tergantung dengan pengaturan yang dapat kita tentukan dari menu Tools -> Locale Settings.

Betapa mudahnya, bukan? Hanya dengan sedikit kode itu saja di Custom File, kita sudah dapat menampilkan control DateTimePicker seperti yang di-generate oleh PHPMaker 2021 pada object Form yang berasal dari table di database. 😉