Question

So i have this picker:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

Now, how can I prepend the date/daterange you choose into div element #viewCalender, when you chose a date?
I tried do:

        <script type="text/javascript"> 
            $(function(){
                  $('#rangeA').daterangepicker({
                  arrows:true,
                  onChange: function(){
$('#calenderView').prepend('test');
}
                  }); 
             });
        </script>

But It prepends “test” twice into #calenderView, even tried with just alerts, and i get two alerts, after i picked a date, which I do not understand why??? And how can i prepend the date/daterange into it?

Answer 1

Posting a complete html document that one could copy and try immediatly would help a lot.

I can only guess, but I’d say:

$(function() {
    $('#rangeA').daterangepicker({
        arrows: true,
        onChange: function(event) {
            // try this one
            event.stopPropagation()
            $('#calenderView').prepend('test');
            // and/or this
            return false;
        }
    });
});

---

Edit

I read the manual, and there it is stated that onChange is a callback that „executes whenever the date input changes (can happen twice on range selections).“

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

I set a breakpoint and debugged that script using Firebug. And whoopee, onSelect (line 69) fired twice, and because of that options.onChange (line 90) is fired twice.

Maybe you shout use onClose instead of onChange:

$(function() {
    $('#rangeA').daterangepicker({
        arrows: true,
        onClose: function(event) {
            $('#calenderView').prepend('test');
        }
    });
});

See: http://jsfiddle.net/3zM3W/10/