tamble / jquery-ui-daterangepicker

A JQuery UI based date range picker.
MIT License
183 stars 108 forks source link

Without Button #19

Open damanic opened 9 years ago

damanic commented 9 years ago

I am having the same issue as described in ISSUE8 (button not populated) https://github.com/tamble/jquery-ui-daterangepicker/issues/8

On the cms/framework I am using jquery and jquery ui are part of the core interface and bootstrap is part of the theme. Therefore I cannot re-order as described in the solution to Issue8.

For a possible work around; what is the best way to initialise a daterange picker without it automatically converting the input field into a trigger button?

I want to use my own trigger button and use events to handle date range changes.


            $("#date_search_input").daterangepicker({
                onChange: function() {
                  //do something cool
                }
            });

    $("#date_search_trigger").click(function () { 
        //open the picker
        $("#date_search_input").daterangepicker("open"); 
        return false; 
    });

Because the daterangepicker loads its dialog relative to the position of the generated button I cannot hide the button, else the dialog goes off on one.

It would be better if the date picker dialog loaded relative to the element that triggered it. So with above example in mind, if ("$date_search_trigger) clicked, load it next to that. This along with suppression of the automatically generated button would be an acceptable solution in this case.

Thoughts?

dzek69 commented 9 years ago

+1 I'd vote for specifying a "target" element, which should be used like the <button> that's now created.

For temp solution: I'm gonna create another input (I have fancy styles for my inputs), then on change I'm gonna copy there the text from the button, which i'm going to rescale to 1x1 px, hide it with visibility: hidden and put it near (or above/below with relative/absolute positioning) the input.

HaraldWalker commented 9 years ago

+1 Am also using the extra invisible element now and a onChange event trigger that displays the selected values in the normal text input.