The first effect:
Code:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100-101 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> date selection </title> <link rel=" stylesheet "href=" Reset-jquery-ui.min.css "/> <script type= "Text/javascript" src= "jquery-1.8.3.min.js" ></script> <script type= "Text/javascript" Src= "Jquery-ui.js" ></script> <script type= "Text/javascript" >//Date selection $.datepicker.regional[' zh-cn '] = {cleartext: ' Clear ', Clearstatus: ' Purge selected date ', Closetext: ' Close ', Closestatus: ' Do not change current selection ', Prevtext: ' < last month ', Prevstatus: ' Show last month ', Prevbigtext: ' << ', Prevbigstatus: ' Show previous year ', Nexttext: ' Next month > ', Nextstatus: ' Show next month ', Nextbigtext: ' >> ', NEXTBI Gstatus: ' Show next year ', Currenttext: ' Today ', Currentstatus: ' Show this month ', monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December '], Monthnamesshort:[' One ', ' two ', ' three ', ' four ', ' five ', ' six ', ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 ', Monthstatus: ' Select Month ', Yearstatus: ' Select Year ', Weekheader: ' Zhou ', Weekstatus: ' Week of the Year ', DayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', '] Thursday ', ' Friday ', ' Saturday '], daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], Daystatus: ' Set DD to start of Week ', Datestatus: ' Select M-month D-Day, DD ', DateFormat: ' Yy-mm-dd ', firstday:1, initstatus: ' Please select Date ', Isrtl:false}; $.datepicker.setdefaults ($.datepicker.regional[' ZH-CN ')); var a = 0; var tmpdate = ""; /** * Instantiate the date control and bind the callback function, passing in the corresponding parameter * tagid date control instantiated label ID * Ajaxmethod callback function * Ajaxmethod extra parameters to be used **/function Datepicke Rbyid (TagID) {$ (TagID). DatePicker ({isdatachecked:true, autoclose:true, Showothermonths:true, changeyear:true,// Showstatus:true,//showon: "Both", numberofmonths:2,//shows a few months showmonthafteryear:true, Onselect:function (DateText, Inst) {////Select the operation after the date a++ Inst.autoclose = true; if (a==1) {inst.settings.isDataChecked = false; tmpdate = Datetext; } if (a==2) {a=0; inst.settings.isDataChecked = false; inst.autoclose = false; var date1 = new Date (tmpdate). GetTime (); VA R date2 = new Date (datetext). GetTime (); var arg = {Time_s:date1,time_e:date2}; The time parameter to use for the AJAX function if (DATE1<DATE2) {$ (TagID). Val (Tmpdate.replace (/-/ig, "-") + "to" +datetext.replace (/-/ig, "- ")); } else if (date1 = = date2) {a = 1; inst.settings.isDataChecked = false; Inst.autoclose = true;} else{$ (TagID). Val (Datetext.replace (/-/ig, "-") + "to" +tmpdate.replace (/-/ig, "-"));} }); } </script> </head> <body> time selection: <input id= "Div1" style= "height:30px;width:190px;" /> <script type= "Text/javascript" > Datepickerbyid (' #div1 '); </script> </body> </html> |
The
Based on the jquery UI 1.11.4 is modified as follows (modified in the source code):
| 1 2 3 4 5 6 7 8 9 | * * Hide the date picker from view. * @param input element-the input field attached T o The date picker */_hidedatepicker:function (input) {var showanim, duration, postprocess, onClose, inst = this._curinst ; if (!inst | | (Input && Inst!== $.data (input, "DatePicker")) {return;} /** * 2015.6.11 Revision * Author:link * Add inst.autoclose Control calendar panel//-------------------------------------------------------- ---------------------------------if (this._datepickershowing| |! Inst.autoclose) {Showanim = This._get (Inst, "Showanim"); duration = This._get (Inst, "duration"); postprocess = function () {$.datepicker._tidydialog (inst);}; Deprecated:after BC for 1.8.x $.effects[Showanim] are not needed if (inst.autoclose===true) {//here does not hide}else{if ($.ef Fects && ($.effects.effect[Showanim] | | | $.effects[SHOWANIM]){inst.dpDiv.hide (Showanim, $.datepicker._get (Inst, "Showoptions"), duration, postprocess); else {inst.dpdiv[(Showanim = = "Slidedown"?) "Slideup": (Showanim = = = "FadeIn"? "fadeout": "Hide")]] ((Showanim. duration:null), postprocess); }//-----------------------------------------------------------------------------------------if (!showanim) { PostProcess (); } this._datepickershowing = false; OnClose = This._get (Inst, "OnClose"); if (onClose) {onclose.apply (inst.input? Inst.input[0]: null), [(Inst.input? Inst.input.val (): ""), Inst]); This._lastinput = null; if (this._indialog) {this._dialoginput.css ({position: "absolute", left: "0", Top: " -100px"}); if ($.blockui) {$.unbloc Kui (); $ ("Body"). Append (This.dpdiv); } This._indialog = false; } }, |
The above mentioned is the entire content of this article, I hope you can enjoy.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
