javascript - Toggle inline mode - jQuery UI datepicker -

jquery ui datepickers can inline or popup depending on type of element called on. <input> makes them popup , <div> or <span> makes them inline.

i need way toggle them popup inline , without clobbering event listeners , other things have been coupled elements.

as starting point: this fiddle close actual environment. code needs changes:

var toggle = function(){     //toggle #startdate's inline-ness without clobbering };  $node.on('click','#toggle',toggle); 

as can see, datepickers attached timepickers , eachother through datepair script. re-instantiating them when toggle undesirable.

a css solution change #startdate's class ideal doubt that's possible.

edit: photo description of i'm trying achieve:

i need toggle button toggle between following:

inline mode:

popup mode:

notice how 1 expanded , other pops when clicked on. in fiddle, currently, difference between startdate , enddate datepickers.

i able simulate wanted: http://jsfiddle.net/slicedtoad/hzg2ec30/9/

///////////////////// // makes datepicker toggleable between inline , emulated popup mode. // returns: function toggles datepicker. // params: //  - id of container //  - options.datepicker , options.altfield (class names) //    ^ defaults .picker , .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 needed     var $node = $(container).addclass("datepicker-toggleable");     var inline = false;     var open = false;     var bindoneoutsidemousedown = function(){      // binds 1 mousedown, rebinds if click on picker or altfield         $(document).one('mousedown',function closeorbindagain(e){             if (inline) {return;}             var $picker = $node.find(picker);             if (!$picker.is($(e.target)) // if target of click isn't picker             && !$(e.target).parents(picker).length // nor descendant of picker             && !$node.find(altfield).is($(e.target))) { // nor 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 below 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; }; 

usage:

$("#startdate .picker").datepicker({     altfield: ".altfield" });  var togglestart = maketoggleable("#startdate",{altfield:".altfield",datepicker:".picker"}); //makes #startdate toggleable , returns function toggle  $("#toggle").click('click', togglestart); $("#toggle").trigger('click'); 

basically, it's inline pretends popup when in "popup mode". datepicker's popup mode, needs animate opacity rather being set display:none. other details well.

and here working 2 datepickers in same container , lots of coupling: http://jsfiddle.net/slicedtoad/lf71gjcc/3/