Cara Membuat Form Input Tanggal dengan Datepicker

Cara Membuat Form Input Tanggal dengan Datepicker - Hallo sahabat Teman Koding, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Form Input Tanggal dengan Datepicker, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Form Input Tanggal dengan Datepicker
link : Cara Membuat Form Input Tanggal dengan Datepicker

Baca juga


Cara Membuat Form Input Tanggal dengan Datepicker

Pada tutorial kali ini kita hendak belajar membuat suatu inputan tanggal dengan Datepicker. Datepicker ialah plugin jquery buat menunjukkan kalendar interaktif yang bisa memudahkan kita buat input tanggal dengan format date ataupun datetime. Kita dapat memakai plugin datepicker ini pada suatu form inputan bertepatan pada lahir serta sebagainya.


Membuat Form Input Tanggal dengan Datepicker


Disini saya hendak membagikan 2 contoh plugin datepicker yang bisa di terapkan di aplikasi website sahabat, awal Datepicker JQuery UI serta yang kedua Datepicker Bootstrap.  

Datepicker JQuery UI
Membuat Form Input Tanggal dengan Datepicker

Buat memasang plugin Datepicker JQuery UI, sahabat butuh memanggil komponen css serta class jquerynya dengan mendownload plugin datepicker jquery ui ataupun dapat langsung mengakses lewat CDN dengan script dibawah ini setelah itu letakkan di dalam tag head. 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Buat fungsi untuk menerapkan datepicker pada inputan form dengan javascript.
 <script>
  $( function() {
    $( "#date" ).datepicker();
  } );
  </script>

#date diatas merupakan isi dari attribute id pada form input. Lihat kode dibawah ini.
<label >Date:</label>
<input type="text" id="date">

Untuk format atau option datepicker jquery ui seperti penampilan tanggal (yyyy-mm-dd) dan sebagainya, teman-teman bisa membaca dokumentasinya di sini. api.jqueryui.com/datepicker
Contoh untuk menampilkan tanggal dengan format yyyy-mm-dd.
<script>
$( function() {
  $( "#date" ).datepicker({
    dateFormat: "yy-mm-dd"
  });
} );
</script>

Kode lengkap membuat form input dengan datepicker jquery ui seperti dibawah ini. Simpan dengan nama file latihan1.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>temankoding.site</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "#date" ).datepicker({
      dateFormat: "yy-mm-dd"
    });
  } );
  </script>
</head>
<body>

  <label >Date:</label>
  <input type="text" id="date">
 
</body>
</html>

Datepicker Bootstrap
Membuat Form Input Tanggal dengan Datepicker
Datepicker Bootstrap ialah plugin ekstra buat framework bootstrap. Gunanya sama dengan datepicker jquery ui, ialah buat menunjukkan popup kalendar interaktif.

Unduh plugin datepicker bootstrap terlebih dulu di sini bootstrap-datepicker.

Setelah download selesai, silahkan ekstrak hasil download tadi kemudian pindahkan folder bootstrap-datepicker kedalam folder xampp/htdocs.
Membuat Form Input Tanggal dengan Datepicker

Panggil komponen css dan jquerynya dengan menambahkan kode dibawah ini didalam tag head.
<!-- framework bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <!-- datepicker bootstrap -->
  <link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css">
  <script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
  <script src="bootstrap-datepicker/locales/bootstrap-datepicker.id.min.js"></script>

Untuk menerapkan datepicker bootstrap di dalam form input, caranya sama dengan datepicker jquery ui dengan membuat fungsi javascript.
  <script>
  $( function() {
    $( "#date" ).datepicker();
  } );
  </script>

#date merupakan isi dari attribute id pada form input.

Teman-teman bisa membaca dokumentasinya untuk mengubah format atau option datepicker bootstrap disini bootstrap-datepicker.readthedocs.io. Contoh sederhana format tanggal pada datepicker bootstrap.
<script>
$( function() {
  $( "#date" ).datepicker({
    autoclose:true,
    todayHighlight:true,
    format:'yyyy-mm-dd',
    language: 'id'
  });
} );
</script>

Kode lengkap membuat form input dengan datepicker bootstrap. Simpan dengan nama file latihan2.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>temankoding.site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- framework bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <!-- datepicker bootstrap -->
  <link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css">
  <script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
  <script src="bootstrap-datepicker/locales/bootstrap-datepicker.id.min.js"></script>

  <script>
  $( function() {
    $( "#date" ).datepicker({
      autoclose:true,
      todayHighlight:true,
      format:'yyyy-mm-dd',
      language: 'id'
    });
  } );
  </script>
</head>
<body>

<div class="container">
 
  <form>
    <div class="form-group">
      <label  class="control-label col-sm-1" >Date:</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="date">
      </div>      
    </div>
  </form>
</div>

</body>
</html>

Tutorial membuat form input tanggal dengan datepicker telah selesai. Sekian, semoga bermanfaat.


Demikianlah Artikel Cara Membuat Form Input Tanggal dengan Datepicker

Sekianlah artikel Cara Membuat Form Input Tanggal dengan Datepicker kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Form Input Tanggal dengan Datepicker dengan alamat link http://www.temankoding.site/2021/04/cara-membuat-form-input-tanggal-dengan.html

Tidak ada komentar untuk "Cara Membuat Form Input Tanggal dengan Datepicker"