Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Date Transferring From Calendar To Text Field

    Hochgeladen von

    Walter Buyela
    6 Ansichten4 Seiten
    Date Transferring From Calendar to Text Field

    Originaltitel

    Date Transferring From Calendar to Text Field

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Date Transferring From Calendar to Text Field

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    6 Ansichten4 Seiten

    Date Transferring From Calendar To Text Field

    Hochgeladen von

    Walter Buyela
    Date Transferring From Calendar to Text Field

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 4

    DateTransferringfromCalendartotextfield.

    Wehaveseenhowtodisplaycalendarinalayer.Nextwewilltrytousethiscalendartoinputadatetoatext
    field.Inmanyapplicationswehavetoinputadateinatextfield.Itisbetterifwedisplayacalendarandask
    theusertoselectadatebyclickingthedateinthecalendar.Oncethedateisclickedthenthedatevaluewill
    betransferredtotextfield.

    Itisrecommendedtoreadhowtodisplaycalendarinalayertutorialfirst.
    Wewillmodifythebasictutorialandherearethechangestobeaddedtobasictutorial.

    DatewithonClickevent
    Wewilldisplaydatefieldbyaddinghyperlinktoeachdate.OnClickeventofthedatewilltriggerafunction
    whichwilltransferthedatedatatotextfield.Firstletusunderstandthedatedisplay.

    str=str+"<td><ahref=#onclick='return_value(month,"+dy+",year);';>"+dy+"</td>";

    Wehaveseenintheabovelinethatwhenuserclicksthedate,thenittriggersonefunctionreturn_value.
    Insidethisfunctionweassignthecorrespondingdatevaluetothetextbox.Hereisthecode.

    functionreturn_value(month,dt,year){
    document.getElementById('t1').value=month+'/'+dt+'/'+year;
    }

    demoofgettingcalendardateinatextfield

    Notethatthemonthreturnisstartingfrom0to11(not12),readmoreongetMonth()Thefullcodeofthis
    pageishere

    <html>
    <head>
    <title>DemoofDateTransferringfromCalendartotextfield</title>
    <styletype="text/css">
    div{
    display:none;
    }
    </style>
    <scriptlanguage="JavaScript">
    vardt=newDate();
    varmonth=dt.getMonth();//readthecurrentmonth
    varyear=dt.getFullYear();//readthecurrentyear

    dt=newDate(year,month,01);//Year,month,dateformat

    varfirst_day=dt.getDay();//,firstdayofpresentmonth

    dt.setMonth(month+1,0);//Settonextmonthandonedaybackward.
    varlast_date=dt.getDate();//Lastdateofpresentmonth

    vardy=1;//dayvariableforadjustmentofstartingdate.
    varstr="<tablebgcolor='#f1f1f1'><tr><tdcolspan=7align=right>";
    str+="<ahref=#onclick="setVisibility('calendar1','none');";>X</a></td></tr>";
    str+="<tr><td>Su</td><td>Mon</td><td>Tue</td><td>Wed</td>";
    str+="<td>Thu</td><td>Fri</td><td>Sat</td></tr>";

    for(i=0;i<=41;i++){

    if((i%7)==0){str=str+"</tr><tr>";}//ifweekisoverthenstartanewline
    if((i>=first_day)&&(dy<=last_date)){
    str=str+"<td><ahref=#onclick='return_value(month,"+dy+",year);';>"+dy+"</td>";

    dy=dy+1;
    }else{str=str+"<td>*</td>";}//Blankdates.
    }//endofforloop

    str=str+"</tr></table>";

    functionsetVisibility(id,visibility){
    document.getElementById(id).innerHTML=str;
    document.getElementById(id).style.display=visibility;
    }

    functionreturn_value(month,dt,year){
    document.getElementById('t1').value=month+'/'+dt+'/'+year;
    }

    </script>

    </head>
    <body>

    Youcandisplaycalendarofpresentmonthbyclickingthissmallbox<inputtype=textid=t1>>
    <imgsrc='../images/calendar.jpg'onClick="setVisibility('calendar1','inline');";>
    <divid="calendar1"style="position:absolute;zindex:1;"></div>

    </body>
    </html>

    Das könnte Ihnen auch gefallen