JavaScript-Written Calendar class (based on PJ) _javascript tips

First look at the effect:

Copy Code code as follows:

<script type= "Text/javascript" src= "Http://users4.Jabry.com/pengju/src/pj-2.1.1.mini.js" ></script>
<script type= "Text/javascript" src= "Http://users4.Jabry.com/pengju/src/Calendar.js" ></script>
<input name= "" "type=" Text "id=" pos "style=" Position:absolute; left:200px; top:80px "value=" "readonly=" readonly "/>"
<script type= "Text/javascript" >
var cat=new Calendar (New Date (1633,6,6), 100);
Cat.onchange (function () {alert (this.getdatestring ())})
Cat.onselect (function () {alert (this.getdatestring ());});
Cat.fadein (0)
var o=new Calendar ();
O.locateat (Pj.id ("pos"));
O.onselect (function () {pj.id ("pos"). value=this.getdatestring (); This.hide ()});
PJ ("#pos"). focus (function () {o.show (100)});
</script>

very simple to use;
Create a Calendar object first

Copy Code code as follows:

var calendar=new calendar ();

Just call the show () method to display

Copy Code code as follows:

Calendar.show ()

It's actually called the PJ Library Show method.
So before using the PJ Library to introduce, in the introduction of Calendar.js can be
The main methods of calendar are
getDateString ([pattern]) format is a date format, and the default is YYYY-MM-DD
Show:function (duration) Display calendar
Hide:function (duration) Hide Calendar
Fadein:function (duration) Fade in Calendar
Fadeout:function (duration) Fade calendar
Locateat:function (obj,offsetx,offsety) positions the calendar directly below the specified element, OffsetX, OffsetY Optional, is the offset from the X, Y axis

Only two events are defined
OnChange (FN)//When the event listener changes the year or month, executes the FN function with the current calendar object as the context
Onselect (FN)//The function that is triggered when the date is selected, executes the FN function with the current calendar object as the context

or paste the source code up (a bit more, because the package of a table)

Copy Code code as follows:

Date: Default start date, no need to be null (start on today's date), Yearlistlength: Year drop down list length
function Calendar (date,yearlistlength) {
var currentdate=date| | New Date (), _this=this;

THIS.CONTAINER=PJ ("<div>"). Appendto (Document.body). SetStyle ({overflow: ' hidden ', background: ' #99CCFF ', border: ' 1px solid #CCC ', FontSize: ' 12px ', Height: ' 160px ', Width: ' 180px ', Position: ' absolute ', display: ' None '};
This.container.get (). innerhtml= ' <table border= "0" style= "height:160px;width:180px;" ><tr> <td colspan= "2" align= "center" valign= "Middle" > <select></select></td> <td Colspan= "3" align= "center" valign= "Middle" ><span></span> year <span></span> month </td> &LT;TD colspan= "2" align= "center" valign= "Middle" > <select> <option value= "1" >1</option> < Option value= "2" >2</option> <option value= "3" >3</option> <option value= "4" >4</option > <option value= "5" >5</option> <option value= "6" >6</option> <option value= "7" >7< /option> <option value= "8" >8</option> <option value= "9" >9</option> <option value= "10" >10</option> <option value= "One" >11</option> <option value= "a" >12</option> </ SELECT&GT;&LT;/TD&GT;&LT;/TR&GT;&LT;TR style= "color: #999;" > &LT;TD align= "center" valign= "Middle" > Day </td&Gt &LT;TD align= "center" valign= "Middle" > </td> <td align= "center" valign= "Middle" > Two </td> <td align= "center" valign= "Middle" > Three </td> <td align= "center" valign= "Middle" > Four </td> <td align= " Center "valign=" Middle "> Five </td> <td align=" center "valign=" Middle "> Six </td></tr><tr> &LT;TD align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a></td> <td align= " Center "valign=" middle "><a href=" javascript:void (0) "> </a></td> <td align=" center " Valign= "Middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= " Middle "><a href=" javascript:void (0) "> </a></td> <td align=" center "valign=" Middle " ><a href= "javascript:void (0)" > </a></td> <td align= "center" ValigN= "Middle" ><a href= "javascript:void (0)" > </a></td></tr><tr> <td align= " Center "valign=" middle "><a href=" javascript:void (0) "> </a></td> <td align=" center " Valign= "Middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= " Middle "><a href=" javascript:void (0) "> </a></td> <td align=" center "valign=" Middle " ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "Middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "middle" ><a href= " Javascript:void (0) "> </a></td> <td align=" center "valign=" middle "><a href=" javascript : void (0) "> </a></td></tr><tr> <td align=" center "valign=" Middle "><a href= "Javascript:void (0)" > </a></td> <td align= "center" valign= "Middle" ><a HRef= "javascript:void (0)" > </a></td> <td align= "center" valign= "middle" ><a href= " Javascript:void (0) "> </a></td> <td align=" center "valign=" middle "><a href=" javascript : void (0) "> </a></td> <td align=" center "valign=" middle "><a href=" javascript:void (0) " > </a></td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" >  </a></td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a> </td></tr><tr> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" >  </a></td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > < /a></td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a>< /td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a></td > &LT;TD align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a></td></tr>< tr> <td align= "center" valign= "middle" ><a href= "javascript:void (0)" > </a></td> < TD align= "Center" valign= "middle" ><a href= "javascript:void (0)" > </a></td> <td align= " Center "valign=" middle "><a href=" javascript:void (0) "> </a></td> <td align=" center " Valign= "Middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= " Middle "><a href=" javascript:void (0) "> </a></td> <td align=" center "valign=" Middle " ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "mIddle "><a href=" javascript:void (0) "> </a></td></tr><tr> <td align=" Center "valign=" middle "><a href=" javascript:void (0) "> </a></td> <td align=" center " Valign= "Middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= " Middle "><a href=" javascript:void (0) "> </a></td> <td align=" center "valign=" Middle " ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "Middle" ><a href= "javascript:void (0)" > </a></td> <td align= "center" valign= "middle" ><a href= " Javascript:void (0) "> </a></td> <td align=" center "valign=" middle "><a href=" javascript : void (0) "> </a></td></tr></table>";

THIS.SPANS=PJ ("span", This.container.get ());
THIS.AS=PJ ("A", This.container.get ()). SetStyle ({textdecoration: "None", Color: "#333"});
THIS.SELECTS=PJ ("Select", This.container.get ());
This.getcurrentdate=function () {return currentdate;};
This.init ();
This.inityearlist (yearlistlength| | 70);

var change=function () {},select=function () {};
This.onchange=function (FN) {//When the event listener changes the year or month, executes the FN function with the current calendar object as the context
if (Pj.isfunction (FN)) Change=fn;
};
This.onselect=function (FN) {//function that fires when a date is selected, executes the FN function with the current calendar object as the context
if (Pj.isfunction (FN)) Select=fn;
};

This.selects[0].onchange=function () {
Currentdate.setfullyear (parseint (This.options[this.selectedindex].value));
_this.init ();
Change.apply (_this,arguments);
};//Select Year
This.selects[1].onchange=function () {
Currentdate.setmonth (parseint (This.options[this.selectedindex].value)-1);
_this.init ();
Change.apply (_this,arguments);
};//Select Month

This.selects[1].options[currentdate.getmonth ()].selected=true;

This.as.addListener ({
Click:function () {currentdate.setdate (parseint (this.innerhtml)); select.apply (_this,arguments);},
Mouseover:function () {if (_this.todate.getdate () + ""!=this.innerhtml) this.style.color= "#CCC";},
Mouseout:function () {if (_this.todate.getdate () + ""!=this.innerhtml) this.style.color= "#333";}
});

PJ ("TD", This.container.get (0)). AddListener ({
Mouseover:function () {this.style.backgroundcolor= "#303";},
Mouseout:function () {this.style.backgroundcolor= "#9CF";}
});
}
calendar.prototype={
Init:function () {
var cur=this.getcurrentdate (),
I=new Date (Cur.getfullyear (), Cur.getmonth (), 1). Getday (),//Take Week
J=new Date (Cur.getfullyear (), Cur.getmonth () +1,0). GetDate ()//The maximum number of days of the month
alert (i);
This.spans[0].innerhtml=cur.getfullyear ();
This.spans[1].innerhtml=cur.getmonth () +1;
var m=0,n=this.as.length-1,istodate=calendar.isthismonth (cur);
while (m<n) {this.as[m].innerhtml=this.as[n].innerhtml= '; n--;m++;} Empty
for (Var day=1;day<=j;day++,i++) {
This.as[i].innerhtml=day;
if (Istodate&&day==this.todate.getdate ()) {
This.todatelink=this.as[i];
Pj.setstyle (this.as[i],{color: "#F60", FontWeight: "Bold"});
}else if (!istodate&&day==this.todate.getdate () &&this.todatelink) {
Pj.setstyle (this.todatelink,{color: "#333", FontWeight: "Normal"});
}
}
},
Inityearlist:function (len) {
Calendar.emptyselect (This.selects[0]);

var cur=this.getcurrentdate (), Now=this.todate.getfullyear (), Max=math.max (Now-cur.getfullyear (), Len);
for (Var y=0;y<=max;y++) {//year dropdown list length 12
var option=document.createelement ("option");
if (Cur.getfullyear () ==now) option.selected=true;
else Option.selected=false;
Option.text=now;
option.value=now--;
try{
This.selects[0].add (Option,null);
}catch (e) {
This.selects[0].add (option);
}
}
},
Getdatestring:function (format) {//format is a date format, such as Yyyy-mm-dd
if (!format| |! /y{4}.m{2}.d{2}/.test (format)) format= "YYYY-MM-DD";
Format=format.replace (/^yyyy/,this.getcurrentdate (). getFullYear ());
Format=format.replace (/mm/,calendar.fx (This.getcurrentdate (). getmonth () +1));
Format=format.replace (/dd/,calendar.fx (This.getcurrentdate (). GetDate ()));
return format;
},
Todate:new Date (),
Todatelink:null,
Show:function (Duration) {this.container.show (duration);},
Hide:function (Duration) {this.container.hide (duration);},
Fadein:function (Duration) {this.container.fadeIn (duration);},
Fadeout:function (Duration) {this.container.fadeOut (duration);},
Locateat:function (obj,offsetx,offsety) {
This.container.locate (OBJ,PJ. Left_bottom_position,offsetx,offsety);
}
};
Calendar.emptyselect=function (target) {
if (!target.options) return;
while (target.options.length>0) target.remove (0);
};
Calendar.fx=function (Dig) {return dig<10? ' 0 ' +dig:dig};
Calendar.isthismonth=function (date) {
Return Date.getfullyear () ==calendar.prototype.todate.getfullyear () &&date.getmonth () = = Calendar.prototype.todate.getMonth ();
};

Cloud-dwelling Community packaging
Online Demo http://demo.jb51.net/js/Calendar_pj/index.htm
Package Download http://www.jb51.net/jiaoben/33760.html