javascript - 切换内联模式 - jQuery UI datepicker

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);

如您所见，日期选择器通过日期对脚本附加到时间选择器和彼此。因此，当它们切换时简单地重新实例化它们是不可取的。

我只是更改的 CSS 解决方案 #StartDate的类(class)会很理想，但我怀疑这是否可能。

编辑:我要实现的目标的照片描述:

我需要切换按钮来在以下各项之间切换:

内联模式:

弹出模式:

注意其中一个始终展开，而另一个在单击时弹出。目前，在我的 fiddle 中，这将是开始日期和结束日期日期选择器之间的区别。

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。可能还有一些其他细节。

这里它在同一个容器中使用两个日期选择器和大量耦合:http://jsfiddle.net/slicedtoad/Lf71gjcc/3/