Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Begini Mudahnya Menampilkan DatePicker JSCalendar di Custom Files PHPMaker
Mudahnya Menyembunyikan Tombol Delete di Halaman View dari PHPMaker
Mengetahui Tanggal Akhir dari Tanggal Awal Ditambah Sekian Hari di PHPMaker

Begini Mudahnya Menampilkan DatePicker JSCalendar di Custom Files PHPMaker

Kam, 9 Februari 2017 oleh Masino Sinaga 8 Komentar

Pernah mengalami kesulitan ketika ingin menampilkan control DatePicker menggunakan JSCalendar di halaman Custom Files? Jangan khawatir. Berikut ini kita akan mengetahui betapa mudahnya mengimplementasikan fitur itu dari dalam project PHPMaker.

Oke, langsung saja ya supaya tidak bertele-tele!

Pertama kali, pastikan kita sudah mengaktifkan extension JSCalendar 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.

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

<form id="myform" name="myform" class="form-horizontal">
	<div id="r_start" class="form-group">
		<label for="start" class="col-sm-2 control-label ewLabel">Date Start</label>
		<div class="col-sm-10">
		  <span id="el_calendar_start">
		  <input type="text" name="start" data-field="start" data-format="9" size="20" class="form-control" id="start">
		  <script type="text/javascript">
			ew_CreateCalendar("myform", "start", 9);
		  </script>
		  </span>
		</div>
	</div>
</form>

Perhatikan kode barusan. Kita cukup memanggil fungsi Javascript bawaan PHPMaker yang bernama ew_CreateCalendar setelah sintaks untuk menampilkan control TextBox yang bernama dan memiliki ID start.

Parameter pertama adalah ID dari form tempat control TextBox itu berada, yaitu myform.

Parameter kedua adalah ID dari control TextBox, yaitu start.

Parameter ketiga adalah ID dari format data tanggalnya, yaitu 9, yang dalam hal ini artinya adalah data Tanggal beserta Jam, dengan format yyyy-MM-dd hh:mm:ss, atau dikenal di PHP date sebagai YmdHis.

Dalam hal ini, pastikan juga kita sudah mengeset beberapa pengaturan berikut pada file en.json (buka dari menu Tools -> Locale Settings), yaitu:

- Date format ----> YmdHis 
- Date separator ----> - (karakter minus)
- Time separator ----> : (Karakter titik dua).

Terakhir, generate semua file script seperti biasa menggunakan PHPMaker.

Betapa mudah, cepat, dan menyenangkan sekali, bukan?

Hanya dengan sedikit kode itu saja, control DatePicker dapat ditampilkan pada halaman Custom File kita. Selebihnya akan ditangani oleh PHPMaker. Kita tidak perlu menulis kode sampai puluhan, ratusan, atau bahkan ribuan baris secara manual seperti yang mungkin Anda lakukan selama ini. 🙂

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Custom Files, DatePicker, DateTime, Javascript, JSCalendar, PHPMaker Indonesia, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Mudahnya Menyembunyikan Tombol Delete di Halaman View dari PHPMaker
Mengetahui Tanggal Akhir dari Tanggal Awal Ditambah Sekian Hari di PHPMaker

Komentar

  1. Bayu mengatakan

    Ming, 2 Mei 2021 pada 2:26 pm

    Bang,

    Kalau di PHPMaker 2021 bagaimana?

    loadjs.ready(“myform”, 5 {
    ew.createDateTimePicker(“myform”, “start”, {“ignoreReadonly”:true,”useCurrent”:false,”format”:1});
    });

    Kok gak bisa ya?

    Thank you.

    Balas
    • Masino Sinaga mengatakan

      Ming, 2 Mei 2021 pada 6:21 pm

      Periksa ulang lagi kode tersebut. Sepertinya masih belum tepat. Anda bisa membandingkan dengan source code yang di-generate oleh PHPMaker untuk melihat perbedaannya.

      Balas
      • Bayu mengatakan

        Sen, 3 Mei 2021 pada 9:34 am

        Gini bukan Bang?

        loadjs.ready([“myform”, “datetimepicker”], function() {
        ew.createDateTimePicker(“myform”, “dtpstart”, {“ignoreReadonly”:true,”useCurrent”:false,”format”:5});
        });

        Masih nggak bisa.

        Balas
        • Masino Sinaga mengatakan

          Sen, 3 Mei 2021 pada 11:26 am

          Langsung saja ke artikel ini ya : Mudahnya Menampilkan DateTimePicker di Custom Files pada PHPMaker 2021.

          Balas
          • Bayu mengatakan

            Sen, 3 Mei 2021 pada 11:49 am

            Sudah Bang.
            Copy paste code itu ke custom saya.
            Keknya ada yang korup atau gimana.
            Makasih Bang untuk reply-nya.

            Balas
          • Bayu mengatakan

            Sen, 3 Mei 2021 pada 12:06 pm

            Sudah bisa Bang. Makasih banyak.
            Salah saya tidak teliti bahwa harus load js untuk form dan id form harus sama.
            Saat saya copy paste, id form masih pake yang lama (myform) sedangkan load js sudah pakai my_form.
            Kebiasaan pake 2017 yang gak perlu load js.
            GBU.

            Balas
            • Masino Sinaga mengatakan

              Sen, 3 Mei 2021 pada 12:30 pm

              Sama-sama.

              Balas

Trackbacks

  1. Mudahnya Menampilkan DateTimePicker di Custom Files pada PHPMaker 2021 – Masino Sinaga berkata:
    Sen, 3 Mei 2021 pukul 11:24 am

    […] 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. […]

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

Pos-pos Terbaru

  • Masino Extensions for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Dendi pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2025 | WordPress | Catat masuk | Kembali ke atas