1. Preparations
Download the yui package:
Http://developer.yahoo.com/yui/
2. Code:
Add the yui package:
<Script type = "text/javascript" src = ". /js/yuiyahoo. js "> </script> <br/> <script type =" text/javascript "src = ". /js/calendar. js "> </script>
You must declare a class = "yui-skin-sam" DIV:
<Div id = "single" class = "yui-skin-sam" style = "position: absolute; left: 10px; float: left; "> </div> <br/> <script type =" text/javascript "> <br/> YAHOO. namespace ("mine. calendar "); <br/> YAHOO. mine. calendar. init = function () {<br/> var eLog = YAHOO. util. dom. get ("start_date"); <br/> function logEvent (msg) {<br/> eLog. value = msg; <br/> $. ajax ({<br/> url: http://www.yahoo.cn, <br/> type: "POST", <br/> data: "", <br/> success: function (msg) {<br/> // do something <br/>}< br/>}); <br/>}< br/> function dateToLocaleString (dt, cal) {<br/> // var wStr = cal. cfg. getProperty ("WEEKDAYS_LONG") [dt. getDay ()]; <br/> var dStr = dt. getDate (); <br/> var mStr = dt. getMonth () + 1; <br/> if (mStr <10) <br/> mStr = "0" + mStr; <br/> var yStr = dt. getFullYear (); <br/> if (dStr <10) <br/> dStr = "0" + dStr; <br/> return (yStr + "-" + mStr + "-" + dStr); <br/>}< br/> function mySelectHandler (type, args, obj) {<br/> var selected = args [0]; <br/> var selDate = this. toDate (selected [0]); <br/> logEvent (dateToLocaleString (selDate, this); <br/>}; <br/> YAHOO. mine. calendar. cal1 = new YAHOO. widget. calendar ("call", "single"); <br/> YAHOO. mine. calendar. cal1.selectEvent. subscribe (mySelectHandler, YAHOO. mine. calendar. cal1, true); <br/> YAHOO. mine. calendar. cal1.render (); <br/>}< br/> YAHOO. util. event. onDOMReady (YAHOO. mine. calendar. init); </p> <script>
Language configuration (YAHOO. mine. calendar. cal1 = new YAHOO. widget. Calendar ("call", "single"); later ):
YAHOO. mine. calendar. cal1.cfg. setProperty ("MDY_YEAR_POSITION", 1); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MDY_MONTH_POSITION", 2); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MDY_DAY_POSITION", 3); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MY_YEAR_POSITION", 1); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MY_MONTH_POSITION", 2); <br/> // Date labels for zh-TW <br/> var months = ["/u4e00/u6708 ", "/u4e8c/u6708", "/u4e09/u6708", "/u56db/u6708", "/u4e94/u6708", "/u516d/u6708 ", "/u4e03/u6708", "/u516b/u6708", "/u4e5d/u6708", "/u5341/u6708", "/u5341/u4e00/u6708 ", "/u5341/u4e8c/u6708"]; <br/> var weekdays = ["/u65e5", "/u4e00", "/u4e8c", "/u4e09 ", "/u56db", "/u4e94", "/u516d"]; <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MONTHS_SHORT", months); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MONTHS_LONG", months); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("WEEKDAYS_1CHAR", weekdays); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("WEEKDAYS_SHORT", weekdays); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("WEEKDAYS_MEDIUM", weekdays); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("WEEKDAYS_LONG", weekdays); <br/> // Month/Year label format for zh-TW <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MY_LABEL_YEAR_POSITION", 1); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MY_LABEL_MONTH_POSITION", 2); <br/> YAHOO. mine. calendar. cal1.cfg. setProperty ("MY_LABEL_YEAR_SUFFIX", "/u5E74 ");