頁面代碼： <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <link href="/static/css/main.css" rel="stylesheet" type="text/css"/><script src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><!--<script type="text/javascript" src="/static/js/jquery-1.7.2.js"></script>--><script language="javascript" type="text/javascript" src="/static/js/nav.js"></script><script language="javascript" type="text/javascript" src="/static/seg/js/report.js"></script>
<script type="text/javascript"> $(function(){ $( ".datepicker").datepicker({dateFormat: 'yy-mm-dd'}); //$.iniNav("engagement"); });</script>

　　

最終效果如圖所示：

但是放在engagement頁面里的時候，點擊選擇每天的時候，不能自動更新到input里面去。單步調試代碼，發(fā)現(xiàn)，input能夠定位到，而且代碼執(zhí)行的過程中有獲取到點擊的按鈕對應的當天的日期。 在jqueryUI里對應的代碼塊兒如下： /* Update the input field with the selected date. */_selectDate: function(id, dateStr) {var target = $(id);var inst = this._getInst(target[0]);dateStr = (dateStr != null ? dateStr : this._formatDate(inst));if (inst.input)inst.input.val(dateStr);this._updateAlternate(inst);var onSelect = this._get(inst, 'onSelect');if (onSelect)onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callbackelse if (inst.input)inst.input.trigger('change'); // fire the change eventif (inst.inline)this._updateDatepicker(inst);else {this._hideDatepicker();this._lastInput = inst.input[0];if (typeof(inst.input[0]) != 'object')inst.input.focus(); // restore focusthis._lastInput = null;}},

　　關鍵的賦值代碼在 ?inst.input.val(dateStr);而且這句執(zhí)行結束的時候，input的value的確被改掉了成為最新的，但是input里看不到任何效果。

原因在哪？ 我只能查看返回的input的context哪里不同，進行對比： 能正常顯示點擊的最新日期的input：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

區(qū)別：

　　baseURL：

clientHeight:?20

clientLeft:?1

clientTop:?1

clientWidth:?165

　　jQuery183017439375561662018

offsetHeight:?22

offsetLeft:?81

offsetParent:?<li>

offsetTop:?1

offsetWidth:?167

但是我手動給input指定寬高不能解決問題，還是逐步調試，發(fā)現(xiàn)我每次clone的demo其實不是頁面里的那個demo，而是綁定了datepicker以后的，或者說經(jīng)過”修改“的demo-div。 于是將demo移到content_wrapper的外面（因為我每次重新繪圖要把原來的div），用$('.demo')直接找到用來被克隆的div。 然后新的問題出現(xiàn)了，每次我點擊新生成圖表上的日歷控件都會定位到我的demo上面的input.... 見網(wǎng)上有說是因為focus的緣故....

后來發(fā)現(xiàn)，其實這個問題是由我的代碼自己造成的，每次clone過去的代碼是包含了datepicker的事件的，也就是說如果我在創(chuàng)建新的graphBox，（執(zhí)行graphBox.prototype._createBox以后）再去綁定datepicker事件就不會出現(xiàn)這樣的情況了。。。改成現(xiàn)在這樣：

graphBox = function(opt){this.content_wrapper = opt.content_wrapper;this.demo_graph_body = opt.demo_graph_body;this.bookmarkID = opt.bookmarkID;this._createBox(); this._createDatePicker(); this._handleActions(); this._drawChart();}

　　其中this._createDatePicker(); ? 的代碼如下：

graphBox.prototype._createDatePicker = function(){$(this.graph_body).find(".datepicker").datepicker({dateFormat: 'yy-mm-dd'}); }

　　這里只設置了datepicker的dateFormat: 'yy-mm-dd'，未做其他任何設定。

通過測試，ok了。。。。

轉載于:https://www.cnblogs.com/xiami303/archive/2012/12/21/2828416.html

總結

以上是生活随笔為你收集整理的jquery datepicker 点击日期控件不会自动更新input的值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。