Input Form Tanggal dengan Jquery

7 Apr

Terkadang kita agak kesulitan untuk meng-input form untuk tanggal. Setelah saya membaca dari beberapa artikel saya mendapatkan ilmu untuk input tangal dengan Jquery. Saya mendapat dari ajaxproject.com. Banyak ilmu yang saya dapat dari web tersebut. Anda dapat belajar berbagai project aja atau pun jquery disana. Oke langsung pada intinya aja.
Pertama kita mulai dengan membuat formnya.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Belajar Calendar</title>
<link rel=”stylesheet” type=”text/css” href=”css/page.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/calendar-eightysix-v1.1-default.css” media=”screen” />

<script type=”text/javascript” src=”mootools-1.2.4-core.js”></script>
<script type=”text/javascript” src=”mootools-1.2.4.4-more.js”></script>
<script type=”text/javascript” src=”calendar-eightysix-v1.1.js”></script>
<script type=”text/javascript”>
window.addEvent(‘domready’, function() {
var calendarIX = new CalendarEightysix(‘exampleIXb’, { ‘linkWithInput’: false, ‘defaultDate’: ‘1/1/2010’, ‘minDate’: ‘1/1/2010’, ‘maxDate’: ’12/31/2014′, ‘format’: ‘%d’,
‘toggler’: ‘exampleIX-picker’, ‘offsetY’: -4, ‘offsetX’: 76 });
calendarIX.addEvent(‘change’, function(date) {
$(‘exampleIXa’).set(‘value’, date.get(‘month’) + 1);
$(‘exampleIXc’).set(‘value’, date.get(‘year’));
});
var dateIXchange = function() {
//Get the current date
var date = calendarIX.getDate();
//Set the variables from the input and select elements
date.set(‘month’, $(‘exampleIXa’).get(‘value’) – 1);
date.set(‘date’, $(‘exampleIXb’).get(‘value’));
date.set(‘year’, $(‘exampleIXc’).get(‘value’));
//Set the new date
calendarIX.setDate(date);
}
$(‘exampleIXa’).addEvent(‘change’, dateIXchange);
$(‘exampleIXb’).addEvent(‘change’, dateIXchange);
$(‘exampleIXc’).addEvent(‘change’, dateIXchange);
});
</script>
</head>

<body>
<tr>
<th>Example IX</th>
<td>
<select id=”exampleIXa” style=”vertical-align: bottom;”><option value=”1″>January</option><option value=”2″>February</option><option value=”3″>March</option><option value=”4″>April</option><option value=”5″>May</option><option value=”6″>June</option><option value=”7″>July</option><option value=”8″>August</option><option value=”9″>September</option><option value=”10″>October</option><option value=”11″>November</option><option value=”12″>December</option></select>

<input id=”exampleIXb” type=”text” maxlength=”2″ style=”width: 24px; vertical-align: bottom;” />
<select id=”exampleIXc” style=”vertical-align: bottom;”><option value=”2010″>2010</option><option value=”2011″>2011</option><option value=”2012″>2012</option><option value=”2013″>2013</option><option value=”2014″>2014</option></select>
<img id=”exampleIX-picker” src=”img/calendar.gif” width=”13″ height=”12″ alt=”” style=”cursor: pointer; margin-bottom: 2px;” />
</td>
</tr>

</body>
</html>
Simpan dengan nama index.html

File ini sudah siap dijalankan, tinggal anda sisipkan di skrip php anda.
Untuk lebih jelasnya anda dapan meng-unduh file yang lengkap disini
Mohon kritik dan saran jika terjadi kesalahan atau bug. Terima Kasih

Satu Tanggapan to “Input Form Tanggal dengan Jquery”

  1. Roy siregar April 12, 2011 pada 4:47 am #

    mas file .js nya dimana ?
    bagus nih artikel..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

mydesigncrowd

%d blogger menyukai ini: