jquery Date Picker

1: By default, when the date input text box gets the page focus, the date selector component opens the Calendar selection panel in one overlay, when the date input text box loses focus or selects

A date will automatically close the Calendar selection panel

$ (selector). DatePicker ([options]);

Simple example:

[HTML] View Plain copy print? <! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

 

Effect Diagram:






2: Specify the picture button for the popup date picker

Resource files that need to be added in response:

$ (document). Ready (function () {

$ ("#datepicker"). DatePicker ({

Showon: "Button",

Buttonimage: "Images/calendar.gif",

Buttonimageonly:true

});

});


 [HTML] View Plain copy print? <! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">   
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

 

Effect Diagram:




3: Display date selector with year, month drop-down list and button panel

[HTML] View Plain copy print? <! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">   
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

 

Effect Diagram:




4: Date selector showing multiple months at the same time

[HTML] view plain copy print? <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">