2012-01-06 137 views
1

我目前有一個日期選擇器,月份和年份更改設置爲true ...但作爲我的用戶體驗報告反饋的一部分,他們不喜歡datepicker自動關閉時他們選擇一天,因爲有時他們會按月份,日期和年份的隨機選擇順序更改日期。因此,如果他們更改日期選擇月份第一,然後日,日期選擇器自動關閉已保留年份不變。JQUERY-UI:Datepicker - 禁用日期點擊事件

所以我一直在尋找類似datepicker的東西,而day changer只是設置值而不是觸發close事件,只是在showButtonPanel設置爲true時將該close事件委託給Done按鈕。

任何想法我會如何實現這一點?

這裏是我的代碼片段:

<script type="text/javascript"> 
$(function() { 
    $('#datepicker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
    showButtonPanel: true, 
    yearRange: 'c-70:c+nn' 
    }); 
}); 

回答

3

試試這個(我假設你正在使用jQueryUI的日期選擇器):

$(function() { 
     $('#datepicker').datepicker({ 
      onSelect: function(dateText, inst) { inst.show() } 
     }); 
    }); 
+0

謝謝...這一個工作! – VeeBee 2012-01-06 08:02:21

+3

此結果爲'未捕獲的類型錯誤:對象#在Chrome控制檯中沒有方法'show'。沒有顯示選定日期。這有什麼問題? – fiberOptics 2012-05-09 03:07:12

1

在創建日期選擇器使用此選項:

$('input').datepicker({ 
    onClose: function(d,i){setTimeout(function(){$('input').datepicker("show");},1)} 
}); 

不過,當然,你將不得不處理實際收盤自己。

var realClose = false; 
$('input').datepicker({ 
    onClose: function(d,i){if(realClose)setTimeout(function(){$('input').datepicker("show"); realClose = false},1)} 
}); 
$("#done").click(function(){realClose=true;$('input').datepicker("hide")}) 
+0

這不意味着datepicker永遠不會關閉?它總是會再次顯示,用戶是否想要關閉它。 – 2012-01-06 07:54:14

+0

我正在完成我的答案,是的... – 2012-01-06 07:56:15

0

我一直在尋找相同的解決方案。我想要一個OK和Cancel按鈕,並且當選擇一個日期時,除非您單擊OK,否則輸入字段不會更新。

您需要調整如下:

  • 添加STAYOPEN:真正到了this._defaults = {全局默認設置。

  • 在_selectDate:功能(ID,dateStr){你需要調整:

    if (inst.input) 
        inst.input.val(dateStr); 
    

var stayOpen = this._get(inst, 'stayOpen'); 
    if (!stayOpen && inst.input) 
     inst.input.val(dateStr); 

,因爲這將更新,當您選擇輸入字段的值一個約會。您需要設置stayOpen:如果您只想單擊確定更改日期,則爲true,否則日期選擇器將在您選擇新日期時關閉。所以這就是爲什麼我們也得到stayOpen,所以如果這是真的,它會在關閉之前更新輸入字段。

您也可以使用此參數在別的不隱藏日期選擇器:

else if (!stayOpen) { 
    this._hideDatepicker(); 
  • 我使用的關閉按鈕,如OK按鈕,以便在_generateHTML:功能(研究所){你需要調整data-handler =「隱藏」該按鈕的其他內容,如data-handler =「ok」。

  • 在_attachHandlers:功能(研究所){然後可以添加一個新的處理程序結束:

    , 
    ok: function() { 
        window['DP_jQuery_' + dpuuid].datepicker._updateInput(id, inst); 
    } 
    
  • 可以再加入新的功能這樣的更新輸入字段和隱藏的日期選擇器:

    _updateInput: function(id, inst) { 
        if (inst.input) { 
         inst.input.val(this._formatDate(inst)); 
        } 
        this._hideDatepicker(); 
    }, 
    
2

,因爲它是在幾乎每一個瀏覽器:

產生錯誤我不會使用這種解決方案
$(function() { 
    $('#datepicker').datepicker({ 
     onSelect: function(dateText, inst) { inst.show() } 
    }); 
}); 

你可以做的最好的事情是覆蓋jQuery的日期選擇器的_selectDate方法。

您再次添加此功能的日期選擇這樣做:

$('#dateField').datepicker({ 

    changeMonth: true, 
    changeYear: true, 

}, 

$.datepicker._selectDate = function(id, dateStr){ 
    var onSelect, 
    target = $(id), 
    inst = this._getInst(target[0]); 

    dateStr = (dateStr != null ? dateStr : this._formatDate(inst)); 
    if (inst.input) { 
     inst.input.val(dateStr); 
    } 
    this._updateAlternate(inst); 

    onSelect = this._get(inst, "onSelect"); 
    if (onSelect) { 
     onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callback 
    } else if (inst.input) { 
     inst.input.trigger("change"); // fire the change event 
    } 

    if (inst.inline){ 
     this._updateDatepicker(inst); 
    } else { 

     this._lastInput = inst.input[0]; 
      if (typeof(inst.input[0]) !== "object") { 
      inst.input.focus(); // restore focus 
     } 
     this._lastInput = null; 
    } 

}) 

); 

通常會有一個「this._hideDatepicker();」在這個腳本中。 我把它遺漏了。您也可以更改jQuery文件本身,但是我不喜歡做這些事情,因爲在更新jQuery之後您將失去功能。

有了我的解決方案,就沒有必要這樣做了。

+0

你怎麼能使用這個,並讓datepicker仍然應用'ui-state-active'類到當前選定的日子? – ouija 2014-03-26 17:57:08