Javascript Calendar Date Picker / Javascript Calendar Popup / Kalender Javascript
Javascript calendar date picker digunakan untuk memilih tanggal dengan menggunakan calendar fixed yang sesuai dengan calendar sesungguhnya yang dapat dipanggil melalui popup window, sehingga ini juga termasuk javascript calendar popup. Pengembangan dari javascript calendar ini dapat digunakan juga sebagai javascript calendar event. Untuk kali ini saya menunjukan cara membuat javascript calendar date picker dengan popup window.
Halaman pertama:
<head>
<title>Script Javascript Kalender / Pick Date Calendar</title>
</head>
<body>
<center>
<h1>Script Javascript Kalender / Pick Date Calendar</h1>
<ol>
<li>
Pilih Tanggal :
<input type="text" name="pick_date[0]" id="pick_date[0]" disabled="disabled" />
<input type="button" value="" style="background-image:url(cal.gif); background-repeat:no-repeat; background-position:center; border:none;" onClick="pick('pick_date[0]');" />
</li>
<li>
Pilih Tanggal :
<input type="text" name="pick_date[1]" id="pick_date[1]" disabled="disabled" />
<input type="button" value="" style="background-image:url(cal.gif); background-repeat:no-repeat; background-position:center; border:none;" onClick="pick('pick_date[1]');" />
</li>
</ol>
</center>
<script type="text/javascript" language="javascript">
<!--
function pick(tgt)
{
window.open("kalender_pick.php?rand="+Math.random()+"&tgt="+tgt,"Kalender","width=500,height=400,alwaysRaised=yes,scrollbars=yes,directories=no,location=no,menubar=no,toolbar=no")
}
//-->
</script>
</body>
Halaman javascript calendar date picker / javascript calendar popup, simpan dengan nama file kalender_pick.php
<html>
<head>
<meta name="description" content="javascript calendar date picker / javascript calendar popup / kalender javascript" />
<meta name="keyword" content="javascript calendar date picker,script calendar javascript,javascript,calendar,script,kalender" />
<script language="javascript" type="text/javascript">
/*blocker*/
if(window.opener==null)
{
window.location="index.php";
}
/*--------*/
</script>
<title>Script Javascript Kalender / Pick Date Calendar</title>
</head>
<body>
<center>
<h1>Script Javascript Kalender / Pick Date Calendar</h1>
<div id="kalender"></div>
</center>
<script type="text/javascript" language="javascript">
<!--
var array_day=["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
var array_month=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
var date;
var year;
var month;
var day;
var go_year;
var go_month;
var fulldate;
var isi;
var now_date=new Date();
var now_day=now_date.getDate();
var now_month=now_date.getMonth();
var now_year=now_date.getYear();
var url=document.location.href;
var tgt=url.lastIndexOf("tgt=");
tgt=url.slice(tgt+4);
tgt=window.opener.document.getElementById(tgt);
now();
/*now*/
function now()
{
date=new Date();
calendar(date);
}
/*--------*/
/*newdate*/
function newdate()
{
go_month=document.getElementById("sel_month");
date=new Date(go_year,go_month.value);
return calendar(date);
}
/*--------*/
/*calendar*/
function calendar(date)
{
year=date.getFullYear();
month=date.getMonth();
day=date.getDate();
isi="<form>";
isi+="<table align='center' border=1 cellpadding=3 cellspacing=0>";
/**baris 1 (menu2 perintah)**/
isi+="<tr>";
isi+="<td colspan='7' align='center'>";
/*today button*/
isi+="<input type='button' name='today' value='Today' onClick='now();' /> ";
/*--------*/
/*select month*/
date.setDate(1);
isi+="<select name='sel_month' id='sel_month'>";
for(i=0;i<10;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\"0"+i+"\" "+selected+">"+array_month[i]+"</option>";
}
for(i=10;i<12;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\""+i+"\" "+selected+">"+array_month[i]+"</option>";
}
isi+="</select> ";
/*--------*/
/*decrease tahun*/
go_year=year;
isi+="<input type='button' name='year_down' value='<' onClick=\"go_year=document.getElementById('sel_year').value-1; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*output tahun*/
if(go_year==year)
{go_year=year;}
else{go_year=go_year;}
isi+="<input type='text' name='sel_year' id='sel_year' value='"+go_year+"' size='3' disabled='disabled' /> ";
/*--------*/
/*increase tahun*/
isi+="<input type='button' name='year_up' value='>' onClick=\"go_year=document.getElementById('sel_year').value-1+2; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*go button*/
isi+="<input type='button' name='go' id='go' value='Go' onClick=\"newdate();\" />";
/*--------*/
isi+="</td>";
isi+="</tr>";
/**--------**/
/*baris 2 (bulan, tahun)*/
isi+="<tr>";
isi+="<td colspan=7 align='center'><b>"+ array_month[month]+", "+year+"</b></td>";
isi+="</tr>";
/*--------*/
/*baris 3 (header hari)*/
isi+="<tr bgcolor='#00CCFF'>";
for(i=0;i<7;i++)
{
isi+="<td align='center'>"+array_day[i]+"</td>";
}
isi+="</tr>";
/*--------*/
/**baris kalender**/
/*cell tanpa tanggal bagian atas*/
if(date.getDay()!=0)
{
isi+="<tr>";
for(i=0;i<date.getDay();i++)
{
isi+="<td> </td>";
}
}
/*--------*/
/*cell yang ada tanggalnya*/
while(date.getMonth()==month)
{
fulldate=year+"-"+(month+1);
if(date.getDay==0)
{
isi+="<tr>";
}
/*hari ini*/
if(date.getDate()==now_day && date.getMonth()==now_month && date.getYear()==now_year)
{
isi+="<td align='center' bgcolor='#00FF00'><b><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></b></td>";
}
/*--------*/
/**hari lain**/
else
{
/*minggu+sabtu*/
if(date.getDay()==0 || date.getDay()==6)
{var bgcolor="bgcolor='#FEC281'";}
/*--------*/
/*hari biasa*/
else{bgcolor="";}
/*--------*/
isi+="<td align='center' "+bgcolor+"><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></td>";
}
/**--------**/
if(date.getDay()==6)
{
isi+="</tr>";
}
date.setDate(date.getDate()+1);
}
/*--------*/
/*cell tanpa tanggal bagian bawah*/
for(i=date.getDay();i<=6;i++)
{
isi+="<td> </td>";
}
/*--------*/
isi+="</table>";
isi+="</form>";
/**--------**/
document.getElementById("kalender").innerHTML=isi;
}
/*--------*/
//-->
</script>
</body>
</html>
Selesai! ^_^
Untuk melihat demo dari javascript calendar date picker atau bisa juga disebut javascript calendar popup ini silahkan kunjungi: catment.co.cc/demo/calendar
Atau download langsung filenya disini: [DOWNLOAD]
8 comments:
wah...makin mantabs aja ni si agan....te2p smangat lah...n truzzz lah berkarya...
sepz gan!!
Thanx y bwt support'a..sm2 bjuang bwt sukses qt,amiin.. ^^
.mw tnya donk gan..
klau hsil milih tanggal td dmasukin kdalam variabel gimana cranya, coz buat ngitung selisihnya..
thanks b4..
@deo karena g ada email bwt kasih tau deo,jadi moga aja deo baca ya..
bwt pertanyaan deo coba buka http://catment.blogspot.com/2011/03/menghitung-selisih-tanggal.html
Mas mau tanya, kalau di calendernya kita mau masukin keteranga acara gimana?
@cudel klo agan mngkin implementasinya dihalaman web agan udah ada kalendernya y tanpa ngeklik button buat manggil kalendernya?
klo kaya gt agan tinggal nyisipin halaman kalender ini (modif2 dikit) terus gabungin sm query db agan..jadi kalo emang ada event ditanggal tertentu tadi ntr link tgl nya tinggal kasih link buat ke halaman event tadi aja..
Kalo misalnya tetep pake button buat manggil kalendernya agan tinggal nambah satu button/submit buat ngproses tgl yg agan pilih buat ngproses query buat cari event di tgl itu trus tinggal tampilin hasilnya d..
Moga membantu.. :)
thankyou bro.. :)
@gilang sama2 gan.. :)
Posting Komentar
Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com
YM:
tawank_x
bobybibbob