Kunjungan Hari Ini : 107 /
Online : 12
Input Format Tanggal Php
Diposting oleh : salatigawebCom, - Dibaca: 20455 kali
Suatu ketika kita membutuhkan sebuah inputan yang otomatis berupa tanggal. Misalnya input tanggal pemesanan, tanggal pembayaran, dan lain sebagainya. Ketika hanya inputan biasa, bisa jadi pengunjung akan salah menginputkan format tanggalnya. Maka dari itu kita harus membuat sebuah inputan yang dapat menampilkan tanggal.
Kali ini salatigaweb akan berbagi mengenai cara mengaplikasikan library date picker dari Jquery UI untuk melakukan pembuatan user interface.
Jadi cara kerja dari form nantinya seperti berikut :
- User melakukan inputan sebuah data tanggal pada form.
- Form pada user interface telah kita permak menggunakan Jquery UI, sehingga memudahkan user untuk melakukan inputan.
- Jika user memencet button, maka data input tanggal akan diproses (explode) dalam bentuk variabel tertentu, sehingga PHP dapat memasukkannya ke dalam database MySQL.
Sebelum memulai, pastikan telah disiapkan beberapa script CDN Jquery yang diperlukan, diantaranya adalah :
- CSS Jquery UI : http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
- Library Jquery : http://code.jquery.com/jquery-1.9.1.js
- Library Jquery UI : http://code.jquery.com/ui/1.10.3/jquery-ui.js
Berikut adalah kode lengkap nya :
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ ui/ 1.10.3/ themes/ smoothness/ jquery-ui.css" type="text/css" />
<title>Input Tanggal</title>
<script type="text/javascript" src="http:// code.jquery.com/ jquery-1.9.1.js"></script>
<script type="text/javascript" src="http:// code.jquery.com/ ui/ 1.10.3/ jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#input" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<div class="wrapper">
<form action="action.php" method="post">
<label>Masukkan data tanggal</label>
<input type="text" id="input" size="15" name="tanggal" value="12/12/1940" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</body>
</html>
