切換內嵌模式 - jQuery UI日期選擇器

Question

jQuery UI日期選取器可以內聯或彈出，具體取決於它們被調用的元素類型。 <input>使它們彈出並且<div>或<span>使它們成爲內聯。

我需要一種方法來將它們從彈出窗口切換到內聯窗口而不會觸發事件偵聽器以及其他已耦合到元素的事物。

作爲一個起點：需要改變this fiddle is close to my actual environment. 代碼：

var toggle = function(){ 
    //toggle #StartDate's inline-ness without clobbering it 
}; 

$node.on('click','#toggle',toggle); 

正如你所看到的，datepickers連接到timepickers和海誓山盟通過datepair腳本。所以當他們切換時簡單地重新實例化它們是不理想的。

一個CSS解決方案，我只需更改#StartDate的類將是理想的，但我懷疑這是可能的。

編輯：

我需要切換按鈕以下之間切換：

串聯模式：

的我想要實現照片的說明

彈出式模式：

注意如何一個點擊時總是被擴大，其他彈起。在我的小提琴中，目前，這將是startdate和enddate日期選擇器之間的區別。

Answer 1

我能模仿我想要的東西：http://jsfiddle.net/slicedtoad/hzg2ec30/9/

///////////////////// 
// Makes a datepicker toggleable between inline and an emulated popup mode. 
// Returns: function that toggles the datepicker. 
// Params: 
// - id of the container 
// - options.datepicker and options.altfield (class names) 
// ^defaults are .picker and .altfield 

var makeToggleable = function (container, options){ 
    options = typeof options !== 'undefined' ? options : 
       {datepicker:".picker",altfield:".altfield"}; 
    var picker = options.datepicker; 
    var altfield = options.altfield; 
    var container = container; //in case selector refresh is needed 
    var $node = $(container).addClass("datepicker-toggleable"); 
    var inline = false; 
    var open = false; 
    var bindOneOutsideMousedown = function(){ 
    // binds one mousedown, rebinds if click was on the picker or altfield 
     $(document).one('mousedown',function closeOrBindAgain(e){ 
      if (inline) {return;} 
      var $picker = $node.find(picker); 
      if (!$picker.is($(e.target)) // if the target of the click isn't the picker 
      && !$(e.target).parents(picker).length // nor a descendant of the picker 
      && !$node.find(altfield).is($(e.target))) { // nor the altfield 
       open = false; 
       $picker.addClass('invisible'); 
      }else{ 
       bindOneOutsideMousedown(); 
      } 
     }); 
    } 
    var onAltFieldMousedown = function() { //open picker on altfield click 
     if (open||inline) {return;} 
     open = true; 
     var $picker = $node.find(picker); 
     $picker.removeClass("invisible"); 
     $picker.position({ //move it below the altfield 
       my: "left top", 
       at: "left bottom", 
       of: $node.find(altfield), 
       offset: "0 0", 
       collision: "none" 
     }); 
     $picker.datepicker('option', 'onSelect',function (e) { //close on date select   
      $(this).trigger('change'); 
      $picker.datepicker('option', 'onSelect', null); // turn off select listener 
      if(!inline){ 
       $picker.addClass("invisible"); 
       open = false; 
      } 
     }); 
     bindOneOutsideMousedown(); 
    }; 
    var toggle = function() { 
     inline = !inline; 
     if (inline) { //inline mode 
      $node.addClass("inline").removeClass("popup"); 
      $node.find(picker).removeClass("invisible"); 
      $node.find(altfield).addClass("invisible"); 
     } else { //popup mode 
      open = false; 
      $node.removeClass("inline").addClass("popup"); 
      $node.find(picker).addClass("invisible"); 
      $node.find(altfield).removeClass("invisible") 
      .on('mousedown', onAltFieldMousedown); 
     } 
    }; 
    return toggle; 
}; 

用法：

$("#StartDate .picker").datepicker({ 
    altField: ".altfield" 
}); 

var toggleStart = makeToggleable("#StartDate",{altfield:".altfield",datepicker:".picker"}); //makes #StartDate toggleable and returns the function to toggle it 

$("#toggle").click('click', toggleStart); 
$("#toggle").trigger('click'); 

基本上，它總是一個內嵌而裝在「彈出模式」時，彈出窗口。要完全像datepicker的彈出窗口模式，它需要一些動畫opacity而不是設置爲display:none。可能還有其他一些細節。

這裏，它正與在同一容器中的兩個datepickers和大量耦合：http://jsfiddle.net/slicedtoad/Lf71gjcc/3/