Jquery UI多選日期選擇器

您好我有幾個日期選擇器都在同一類.datepicker下我有一個函數執行任何日期選取器的onSelect。然而，我想執行另一個功能選擇特定的日期選擇器我試圖做一個單獨的日期選擇器分配到特定的一個我想要一個單獨的功能，但似乎無法得到它的工作Jquery UI多選日期選擇器

原始日期選擇器類

$(".datepicker").datepicker({ 

      dateFormat: 'yy-mm-dd', 
      showButtonPanel: true, 
      onSelect: function (date_check) { } 

})

我的具體目標日期選擇器，其還擁有一流的日期選擇器的。

$("#myDate").datepicker({ 

       dateFormat: 'yy-mm-dd', 
       showButtonPanel: true, 
       onSelect: function (date_assign) { } 

    })

我的問題是：

有沒有辦法我可以指定與.datepicker類特定datepickers，進行二次ONSELECT功能特定日期選擇器。還是有不同的方式？

* NB datepicker必須能夠執行.datepicker類下的原始功能和新功能。

UPDATE

<input class="datepicker" id="a"> </input> 
<input class="datepicker" id="b"> </input> 
<input class="datepicker" id="myDate"> </input>

在a或b或指明MyDate的選擇運行原始.datepickeronSelect功能

在選擇的具體數值指明MyDate運行原始.datepickeronSelect並運行一個單獨的ONSELECT功能。

來源

2016-04-05 Mr Dansk

然後創建一個自定義事件觸發的onSelect，從選擇的參數並自定義事件：

$('#myDate').on('customevent', function(e, dateText, inst) { 
    alert('custom triggered' + dateText); 
}); 
$(".datepicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    showButtonPanel: true, 
    onSelect: function(dateText, inst) { 
    if ($(this).is('#myDate')) { 
     $('#myDate').trigger("customevent", [dateText, inst]); 
    } 
    // do universal code 
    alert('Date:' + dateText); 
    } 
});

玩弄它h ERE：https://jsfiddle.net/MarkSchultheiss/3grqL8c9/

來源

2016-04-05 13:13:12

您可以檢查是否選擇onSelect已被分配，如果是把它添加到功能，像這樣

var onSelectFn = $("#myDate").datepicker("option", "onSelect") 
$("#myDate").datepicker({ 
       dateFormat: 'yy-mm-dd', 
       showButtonPanel: true, 
       onSelect: function (date_assign) { 
        if(typeof onSelectFn === 'function') onSelectFn(); 
        // do the next function 
       } 

    })

UPDATE

，以更新#myDate選擇的onSelect財產你需要像這樣工作

第一個datePicker所有的.datepicker元素都像所以

$(".datepicker").datepicker({ 
       dateFormat: 'yy-mm-dd', 
       showButtonPanel: true, 
       onSelect: function (date_assign) { 
        if(typeof onSelectFn === 'function') onSelectFn(); 
        // do the next function 
       } 

    })

然後更新的#myDate

$("#myDate").datepicker("option", "onSelect",function(data_assign){ 
    // your new functionality 
})

應該做的伎倆:)

來源

2016-04-05 12:06:51 Zamboney

對不起，如果「#myDate」元素是「選中」，這隻會運行第二個函數嗎？ –

沒有它會同時運行它們，你想禁用第一個並運行其他？ – Zamboney

好的，但我只想在選擇「#myDate」日期選擇器時運行第二個功能。我會盡力在我的問題中提供和舉例。看看我的更新，看看這是否解釋了我想要實現的。 –

我設法回答我的問題：

$(".datepicker").datepicker({ 
      dateFormat: 'yy-mm-dd', 
      showButtonPanel: true, 
      onSelect: function (date_check) { 

      //DO SOME FUNCTION STUFF 

      if($(this).attr('id') == "myDate") { 

      //DO SOME EXTRA STUFF 

      } 
     } 
});

它是如何工作

每一個日期選擇器使用.datepicker類，並執行第一個功能，但是當您單擊#myDate日期選擇器它獲得$(this)的id屬性，根據jQuery UI Datepicker API：

onSelect函數離子

當選擇日期選擇器時調用。該函數接收選定日期作爲文本和日期選擇器實例作爲參數。 this引用關聯的輸入字段。

因此this讓你獲得當前點擊的日期選擇器。然後，您可以對ID與您希望匹配的元素進行比較，然後執行第二個功能。

來源

2016-04-06 06:12:34

Jquery UI多選日期選擇器

回答

相關問題