- Beranda
- Komunitas
- Tech
- Programmer Forum
[ASK] Membuat Calender pop up Menggunakan JavaScript??


TS
Ichida
[ASK] Membuat Calender pop up Menggunakan JavaScript??
Salam Para Suhu , Agan dan Sista
Gini ane ada masalah gan , Ane lagi ada masalah dalam hal membuat coding JavaScript
Ane kebetulan Pakai Aplikasi TOAD, dan kebetulan juga ane main SQL di kantor,
Ane ada masalah kenapa aplikasi ane jika mau pindah tangal sebelumnya tidak bisa di klik jika saya memakai sofware IE ver 9 keatas atau pun aplikasi baik di mozila , google crome juga tidak bisa, aplikasi ini bisa di klik jika memakai aplikasi IE versi 9.0.0 kebawah, ada yg bisa bantu , berikut ane kasih tampilanya
CREATE OR REPLACE PROCEDURE CPIS.CALENDAR_POPUP
(
year_min VARCHAR2 DEFAULT TO_CHAR(ADD_MONTHS(SYSDATE,0),'RRRR'),
year_max VARCHAR2 DEFAULT TO_CHAR(ADD_MONTHS(SYSDATE,0),'RRRR')
) IS
v_yearmax NUMBER;
BEGIN
v_yearmax := v_yearmax + 1;
htp.prn('
[removed]
var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#808080";
var gcToggle = "#FF9900";
var gcBG = "#FFFFFF";
var gcWeek = "#000000";
var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
function fSetDate(iYear, iMonth, iDay)
{
VicPopCal.style.visibility = "hidden";
var tmp= new String(iDay.valueOf());
var tmp1= new String(iMonth.valueOf());
if(tmp.length==1) iDay=''0''+tmp;
if(tmp1.length==1) iMonth=''0''+tmp1;
gdCtrl.value = iDay+"-"+iMonth+"-"+iYear; //Here, you could modify the locale as you need !!!!
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
}
function fSetSelected(aCell)
{
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);
self.event.cancelBubble = true;
aCell.bgColor = gcBG;
with (aCell.children["cellText"])
{
var iDay = parseInt(innerText);
if (color==gcGray)
iOffset = (Victor<10)?-1:1;
iMonth += iOffset;
if (iMonth<1)
{
iYear--;
iMonth = 12;
}
else if (iMonth>12)
{
iYear++;
iMonth = 1;
}
}
fSetDate(iYear, iMonth, iDay);
}
function Point(iX, iY)
{
this.x = iX;
this.y = iY;
}
function fBuildCal(iYear, iMonth)
{
var aMonth=new Array();
for(i=1;i<7;i++) aMonth[i]=new Array(i);
var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1;
for (d = 0; d < 7; d++) aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
for (w = 2; w < 7; w++) for (d = 0; d < 7; d++) aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellHeight, iDateTextSize)
{
var WeekDay = new Array("Min","Sen","Sel","Rab","Kam","Jum","Sab");
var styleTD = " bgcolor=''"+gcBG+"'' bordercolor=''"+gcBG+"'' valign=''middle'' align=''center'' height=''"+iCellHeight+"'' style=''font-family:Verdana;font:bold;font-size:9;"; //Coded by Liming Weng(Victor Won) email:victorwon@netease.com
with (document)
{
write("<tr>");
for(i=0; i<7; i++) write("<td "+styleTD+"color:#990099'' >" + WeekDay[i] + "</td>");
write("</tr>");
for (w = 1; w < 7; w++)
{
write("<tr>");
for (d = 0; d < 7; d++)
{
write("<td id=calCell "+styleTD+"cursor:hand;''>");
write("<font id=cellText Victor=''Liming Weng''> </font>");
write("</td>")
}
write("</tr>");
}
}
}
function fUpdateCal(iYear, iMonth)
{
myMonth = fBuildCal(iYear, iMonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d])
{
Victor = i++;
if (myMonth[w+1][d]<0)
{
color = gcGray;
innerText = -myMonth[w+1][d];
}
else
{
color = ((d==0)||(d==6))?"red":"black";
innerText = myMonth[w+1][d];
}
}
}
function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true;
fUpdateCal(iYear, iMon);
}
function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (--iMon<1) {
iMon = 12;
iYear--;
}
fSetYearMon(iYear, iMon);
}
function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (++iMon>12) {
iMon = 1;
iYear++;
}
fSetYearMon(iYear, iMon);
}
function fToggleTags(){
with (document.all.tags("SELECT")){
for (i=0; i<length; i++)
if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
item(i).style.visibility = "hidden";
goSelectTag[goSelectTag.length] = item(i);
}
}
}
function fTagInBound(aTag){
with (VicPopCal.style){
var l = parseInt(left);
var t = parseInt(top);
var r = l+parseInt(width);
var b = t+parseInt(height);
var ptLT = fGetXY(aTag);
return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t));
}
}
function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}
// Main: popCtrl is the widget beyond which you want this calendar to appear;
// dateCtrl is the widget into which you want to put the selected date.
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="v">
function fPopCalendar(popCtrl, dateCtrl){
gdCtrl = dateCtrl;
fSetYearMon(giYear, giMonth);
var point = fGetXY(popCtrl);
with (VicPopCal.style) {
left = point.x;
top = point.y+popCtrl.offsetHeight+1;
width = VicPopCal.offsetWidth;
height = VicPopCal.offsetHeight;
fToggleTags(point);
visibility = ''visible'';
}
VicPopCal.focus();
}
function fHideCal(){
var oE = window.event;
if ((oE.clientX>0)&&(oE.clientY>0)&&(oE.clientX<document.body.clientWidth)&&(oE.clientY<document.body.clientHeight)) {
var oTmp = document.elementFromPoint(oE.clientX,oE.clientY);
while ((oTmp.tagName!="BODY") && (oTmp.id!="VicPopCal"))
oTmp = oTmp.offsetParent;
if (oTmp.id=="VicPopCal")
return;
}
VicPopCal.style.visibility = ''hidden'';
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
}
var gMonths = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember");
with (document) {
write("<Div id=''VicPopCal''>");
write("<table border=''0'' bgcolor=''#DDDDDD''>");
write("<TR>");
write("<td valign=''middle'' align=''center''><input type=''button'' name=''PrevMonth'' value=''<'' style=''TEXT-VALIGN:middle;height:20;width:20;BACKGROUND: #DDDDDD; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 11px; FONT-WEIGHT: bold''>");
write(" <select name=''tbSelMonth''>");
for (i=0; i<12; i++)
write("<option value=''"+(i+1)+"''>"+gMonths[i]+"</option>");
write("</SELECT>");
write(" <SELECT name=''tbSelYear''>");
for(i='||year_min||';i<='||TO_CHAR(ADD_MONTHS(SYSDATE,2),'RRRR')||';i++)
write("<option value=''"+i+"''> "+i+" </option>");
write("</select>");
write(" <input type=''button'' name=''PrevMonth'' value=''>'' style=''TEXT-VALIGN:middle;height:20;width:20;BACKGROUND: #DDDDDD; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 11px; FONT-WEIGHT: bold'' onclick=''fNextMonth()'' onblur=''fHideCal()''>");
write("</td>");
write("</tr><tr>");
write("<td align=''center''>");
write("<DIV style=''background-color:#000000;''><table width=''100%'' border=''0''>");
fDrawCal(giYear, giMonth, 18, 16);
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align=''center''>");
write("<B style=''cursor:hand;font-family:Arial;font-size:12''>Today : "+giDay+" "+gMonths[giMonth-1]+" "+giYear+"</B>");
write("</td></tr>");write("</td></tr>");
write("</table></div>");
}
// End -->
[removed]
');
END;
/
TOLONG GAN ... FREE
Gini ane ada masalah gan , Ane lagi ada masalah dalam hal membuat coding JavaScript
Ane kebetulan Pakai Aplikasi TOAD, dan kebetulan juga ane main SQL di kantor,
Ane ada masalah kenapa aplikasi ane jika mau pindah tangal sebelumnya tidak bisa di klik jika saya memakai sofware IE ver 9 keatas atau pun aplikasi baik di mozila , google crome juga tidak bisa, aplikasi ini bisa di klik jika memakai aplikasi IE versi 9.0.0 kebawah, ada yg bisa bantu , berikut ane kasih tampilanya
Spoiler for gambar:
![[ASK] Membuat Calender pop up Menggunakan JavaScript??](https://s.kaskus.id/images/2013/09/06/946507_20130906041311.jpg)
Spoiler for coding:
CREATE OR REPLACE PROCEDURE CPIS.CALENDAR_POPUP
(
year_min VARCHAR2 DEFAULT TO_CHAR(ADD_MONTHS(SYSDATE,0),'RRRR'),
year_max VARCHAR2 DEFAULT TO_CHAR(ADD_MONTHS(SYSDATE,0),'RRRR')
) IS
v_yearmax NUMBER;
BEGIN
v_yearmax := v_yearmax + 1;
htp.prn('
[removed]
var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#808080";
var gcToggle = "#FF9900";
var gcBG = "#FFFFFF";
var gcWeek = "#000000";
var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
function fSetDate(iYear, iMonth, iDay)
{
VicPopCal.style.visibility = "hidden";
var tmp= new String(iDay.valueOf());
var tmp1= new String(iMonth.valueOf());
if(tmp.length==1) iDay=''0''+tmp;
if(tmp1.length==1) iMonth=''0''+tmp1;
gdCtrl.value = iDay+"-"+iMonth+"-"+iYear; //Here, you could modify the locale as you need !!!!
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
}
function fSetSelected(aCell)
{
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);
self.event.cancelBubble = true;
aCell.bgColor = gcBG;
with (aCell.children["cellText"])
{
var iDay = parseInt(innerText);
if (color==gcGray)
iOffset = (Victor<10)?-1:1;
iMonth += iOffset;
if (iMonth<1)
{
iYear--;
iMonth = 12;
}
else if (iMonth>12)
{
iYear++;
iMonth = 1;
}
}
fSetDate(iYear, iMonth, iDay);
}
function Point(iX, iY)
{
this.x = iX;
this.y = iY;
}
function fBuildCal(iYear, iMonth)
{
var aMonth=new Array();
for(i=1;i<7;i++) aMonth[i]=new Array(i);
var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1;
for (d = 0; d < 7; d++) aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
for (w = 2; w < 7; w++) for (d = 0; d < 7; d++) aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellHeight, iDateTextSize)
{
var WeekDay = new Array("Min","Sen","Sel","Rab","Kam","Jum","Sab");
var styleTD = " bgcolor=''"+gcBG+"'' bordercolor=''"+gcBG+"'' valign=''middle'' align=''center'' height=''"+iCellHeight+"'' style=''font-family:Verdana;font:bold;font-size:9;"; //Coded by Liming Weng(Victor Won) email:victorwon@netease.com
with (document)
{
write("<tr>");
for(i=0; i<7; i++) write("<td "+styleTD+"color:#990099'' >" + WeekDay[i] + "</td>");
write("</tr>");
for (w = 1; w < 7; w++)
{
write("<tr>");
for (d = 0; d < 7; d++)
{
write("<td id=calCell "+styleTD+"cursor:hand;''>");
write("<font id=cellText Victor=''Liming Weng''> </font>");
write("</td>")
}
write("</tr>");
}
}
}
function fUpdateCal(iYear, iMonth)
{
myMonth = fBuildCal(iYear, iMonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d])
{
Victor = i++;
if (myMonth[w+1][d]<0)
{
color = gcGray;
innerText = -myMonth[w+1][d];
}
else
{
color = ((d==0)||(d==6))?"red":"black";
innerText = myMonth[w+1][d];
}
}
}
function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true;
fUpdateCal(iYear, iMon);
}
function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (--iMon<1) {
iMon = 12;
iYear--;
}
fSetYearMon(iYear, iMon);
}
function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (++iMon>12) {
iMon = 1;
iYear++;
}
fSetYearMon(iYear, iMon);
}
function fToggleTags(){
with (document.all.tags("SELECT")){
for (i=0; i<length; i++)
if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
item(i).style.visibility = "hidden";
goSelectTag[goSelectTag.length] = item(i);
}
}
}
function fTagInBound(aTag){
with (VicPopCal.style){
var l = parseInt(left);
var t = parseInt(top);
var r = l+parseInt(width);
var b = t+parseInt(height);
var ptLT = fGetXY(aTag);
return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t));
}
}
function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}
// Main: popCtrl is the widget beyond which you want this calendar to appear;
// dateCtrl is the widget into which you want to put the selected date.
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="v">
function fPopCalendar(popCtrl, dateCtrl){
gdCtrl = dateCtrl;
fSetYearMon(giYear, giMonth);
var point = fGetXY(popCtrl);
with (VicPopCal.style) {
left = point.x;
top = point.y+popCtrl.offsetHeight+1;
width = VicPopCal.offsetWidth;
height = VicPopCal.offsetHeight;
fToggleTags(point);
visibility = ''visible'';
}
VicPopCal.focus();
}
function fHideCal(){
var oE = window.event;
if ((oE.clientX>0)&&(oE.clientY>0)&&(oE.clientX<document.body.clientWidth)&&(oE.clientY<document.body.clientHeight)) {
var oTmp = document.elementFromPoint(oE.clientX,oE.clientY);
while ((oTmp.tagName!="BODY") && (oTmp.id!="VicPopCal"))
oTmp = oTmp.offsetParent;
if (oTmp.id=="VicPopCal")
return;
}
VicPopCal.style.visibility = ''hidden'';
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
}
var gMonths = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember");
with (document) {
write("<Div id=''VicPopCal''>");
write("<table border=''0'' bgcolor=''#DDDDDD''>");
write("<TR>");
write("<td valign=''middle'' align=''center''><input type=''button'' name=''PrevMonth'' value=''<'' style=''TEXT-VALIGN:middle;height:20;width:20;BACKGROUND: #DDDDDD; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 11px; FONT-WEIGHT: bold''>");
write(" <select name=''tbSelMonth''>");
for (i=0; i<12; i++)
write("<option value=''"+(i+1)+"''>"+gMonths[i]+"</option>");
write("</SELECT>");
write(" <SELECT name=''tbSelYear''>");
for(i='||year_min||';i<='||TO_CHAR(ADD_MONTHS(SYSDATE,2),'RRRR')||';i++)
write("<option value=''"+i+"''> "+i+" </option>");
write("</select>");
write(" <input type=''button'' name=''PrevMonth'' value=''>'' style=''TEXT-VALIGN:middle;height:20;width:20;BACKGROUND: #DDDDDD; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 11px; FONT-WEIGHT: bold'' onclick=''fNextMonth()'' onblur=''fHideCal()''>");
write("</td>");
write("</tr><tr>");
write("<td align=''center''>");
write("<DIV style=''background-color:#000000;''><table width=''100%'' border=''0''>");
fDrawCal(giYear, giMonth, 18, 16);
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align=''center''>");
write("<B style=''cursor:hand;font-family:Arial;font-size:12''>Today : "+giDay+" "+gMonths[giMonth-1]+" "+giYear+"</B>");
write("</td></tr>");write("</td></tr>");
write("</table></div>");
}
// End -->
[removed]
');
END;
/
TOLONG GAN ... FREE

0
1.1K
Kutip
6
Balasan


Komentar yang asik ya
Urutan
Terbaru
Terlama


Komentar yang asik ya
Komunitas Pilihan