Cara mudah membuat tanggal dengan datapicker di PHP, Pada tutorial kali ini kita akan belajar membuat sebuah inputan tanggal dengan Datepicker. Datepicker merupakan plugin jquery untuk menampilkan kalendar interaktif yang dapat mempermudah kita untuk input tanggal dengan format date maupun datetime. Kita bisa menggunakan plugin datepicker ini pada sebuah form inputan tanggal lahir dan sebagainya.
Membuat form input tanggal dengan datepicker
Tanggal dengan datepicker Jquery UI
Untuk membuat tanggal datepicker JQuary UI ini, Anda perlu memanggil komponen CSS dan Class jquerynya dengan mendownload plugin datepicker jquery ui atau bisa langsung script dibawah ini.
Script ini di letakkan ke dalam tag head
<link href="jquery-ui-1.11.4/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="jquery-ui-1.11.4/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.theme.css">Membuat fungsi untuk memanggil datepicker pada inputan form dangan javascript.
<script>
$(document).ready(function(){
$("#tanggal").datepicker({
})
})
</script>#tanggal diatas merupakan isi dari atribut id pada form input, berfungsi untuk memanggil tanggal. Lihat script dibawah.
<tr>
<td>Tanggal</td>
<td>:</td>
<td><input type="text" name="tanggal" id="tanggal" /></td>
</tr>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 Script tanggal dengan format yyyy-mm-dd
<script>
$( function() {
$( "#date" ).datepicker({
dateFormat: "yy-mm-dd"
});
} );
</script>Ok kita akan membuat Script lengkapnya input tanggal dengan datepicker jquery ui, buatlah file form_buku.php.html langsung copy saja script nya dibawah ini.
<!DOCTYPE html>
<html>
<Head>
<title>Membuat form tanggal dengan datepicker - pemulungkode</title>
<link href="jquery-ui-1.11.4/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="jquery-ui-1.11.4/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.theme.css">
<script>
$(document).ready(function() {
$("#tanggal").datepicker({})
})
</script>
</head>
<body>
<h2>Membuat form tanggal dengan datepicker - pemulungkode</h2>
<form action="aksi_buku.php" method="post">
<table>
<tr>
<td>Judul</td>
<td>:</td>
<td><input type="text" name="nama" /></td>
</tr>
<tr>
<td>Penulis</td>
<td>:</td>
<td><input type="text" name="penulis" /></td>
</tr>
<tr>
<td>Tanggal</td>
<td>:</td>
<td><input type="text" name="tanggal" id="tanggal" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="submit" name="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Buat file aksi_buku.php jangan lupa save, silahkan copy script lengkapnya dibawah ini:
<?php
$con = mysqli_connect("localhost","root","","tanggal");
$nama = $_POST['nama'];
$penulis = $_POST['penulis'];
$tanggal = $_POST['tanggal'];
$submit = $_POST['submit'];
function ubahTanggal($tanggal){
$pisah = explode('/',$tanggal);
$array = array($pisah[2],$pisah[0],$pisah[1]);
$satukan = implode('-',$array);
return $satukan;
}
$tgl_terbit = ubahTanggal($tanggal);
if(isset($submit)){
if(empty($nama) or empty($penulis) or empty($tanggal)){
echo"<script>window.alert('Maaf,Form tidak boleh kosong....!!!');window.location=('form_buku.php');</script>";
}else{
$ins = mysqli_query($con,"insert into buku(judul,penulis,tgl_terbit) values ('$nama','$penulis','$tgl_terbit')");
echo"<script>window.alert('Data Berhasil diupload');window.location=('form_buku.php');</script>";
}
}
?>Bagi temen-teman yang ingin script lengkap tutorial form input tanggal dengan datapicker bisa download lasing saja ada di bawah untuk link downloadnya.
Download lewat …
Sekian tutorial tentang form input tanggal dengan datapicker, semoga membantu anda yang sedang mencari tutorial ini, jika ada pertanyaan jangan sungkan-sungkun untuk corat-coret dalam kolom komentar, dan sekiranya membantu anda jangan lupa untuk berbagi ke temen-temen anda yang sedang membutuhkan, bantu support juga dengan mengklik iklan. Terima kasih.
Pingback: Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO
Pingback: Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO