Pls help here

The date selection options do not work in Chrome browser (when I select a date option nothing happens). This works fine in Firefox browser.

I see below logs in the Chrome browser's 'Inspect Element' console:

daterangepicker.jQuery.js:256Uncaught TypeError: undefined is not a function
daterangepicker.jQuery.js:159Uncaught TypeError: Cannot call method 'formatDate' of undefined
daterangepicker.jQuery.js:171Uncaught TypeError: Object [object Object] has no method 'datepicker'
daterangepicker.jQuery.js:171Uncaught TypeError: Object [object Object] has no method 'datepicker'
2 daterangepicker.jQuery.js:159Uncaught TypeError: Cannot call method 'formatDate' of undefined
daterangepicker.jQuery.js:171Uncaught TypeError: Object [object Object] has no method 'datepicker'
daterangepicker.jQuery.js:171Uncaught TypeError: Object [object Object] has no method 'datepicker'
2 daterangepicker.jQuery.js:256Uncaught TypeError: undefined is not a function

Please give some hints to fix this.

Hey all,

I have the daterangepicker on a toolbar at the bottom of the page. Problem is when I click in the input field, the dropdown drops downward and clips off the page and therefore content does not become selectable. So I thought posX and posY would allow me to rearrange the dropdown to display above the input field. Unfortunately thats not what happened. Any way to move the dropdown so it doesnt drop below the input field but rather renders above it so it doesnt get clipped off page?

thanks for response

What version is this? Is it still being maintained?

I am trying to use preset ranges and i get error: "cannot find function MoveToFirstDay..."

i found you have not included those functions in daterangepicker.jQuery.js.
BUT they exist in daterangepicker.jQuery.compressed.js

thanks a lot, you are great!

I get the error if there is no any element. In my case any class rangedcalendar :
$('.rangedcalendar').daterangepicker();

I solved with this update
//daterangepicker.jQuery.js row 108

if(rangeInput.size() == 2){
    inputDateAtemp = Date.parse( rangeInput.eq(0).val() );
    inputDateBtemp = Date.parse( rangeInput.eq(1).val() );
    if(inputDateAtemp == null){inputDateAtemp = inputDateBtemp;} 
    if(inputDateBtemp == null){inputDateBtemp = inputDateAtemp;}
} else if(rangeInput.size() == 0) {
    //marcomd
    return null;
} else {
    inputDateAtemp = Date.parse( rangeInput.val().split(options.rangeSplitter)[0] );
    inputDateBtemp = Date.parse( rangeInput.val().split(options.rangeSplitter)[1] );
    if(inputDateBtemp == null){inputDateBtemp = inputDateAtemp;} //if one date, set both
}

The function hover() which appears a few places, has been removed in JQ 1.9.

Using

.on({
    mouseenter: function() {   something ; },
    mouseleave: function() {  something ;  }
})

would seem like an easy replacement.

Would be really nice to see this repo in Bower repository.

Line 246/247:
rp.find('.range-start').restoreDateFromData().css('opacity',1).show(400);
rp.find('.range-end').restoreDateFromData().css('opacity',1).show(400);

should be changed to:
rp.find('.range-start').restoreDateFromData().datepicker('refresh').css('opacity',1).show(400);
rp.find('.range-end').restoreDateFromData().datepicker('refresh').css('opacity',1).show(400);

I have some fields that when they change update part of the angular $scope

I expect that whenever a user selects a date range that the ng:change event would be fired - this is not the case.

A demo of what's happening:

http://jsfiddle.net/we7b9/3/

The DateRangePicker does not parse the input value using the dateFormat option. Instead, it parse it in english format (mm/dd/yy).

Given this input,

<input type="text" value="09/01/2012" />

and this javascript code,

$(function(){
    $('input').daterangepicker({
        dateFormat: 'dd/mm/yy',
        arrows: true,
        datepickerOptions: {
            dateFormat: 'dd/mm/yy'
        }
    });
});

when I click on the right arrow, the input value become "02/09/2012" instead of "10/01/2012" (January, 10th in the dateFormat "dd/mm/yy").

The "Specific date" also opens the calendar on September.

I encountered an issue where after upgrading to the latest version of the Date Range Picker and JQuery UI 1.10, the preset date ranges did not change when selected.

I was able to resolve this via this simple change on lines 269 and 270:

old:

            rp.find('.range-start').datepicker('setDate', dateStart).find('.ui-datepicker-current-day').trigger('click');
            rp.find('.range-end').datepicker('setDate', dateEnd).find('.ui-datepicker-current-day').trigger('click');

new:

            rp.find('.range-start').datepicker('setDate', new Date(dateStart)).find('.ui-datepicker-current-day').trigger('click');
            rp.find('.range-end').datepicker('setDate', new Date(dateEnd)).find('.ui-datepicker-current-day').trigger('click');

I checked the API documentation and the DatePicker.setDate function appears to never have accepted the long integer version, so perhaps the JQuery UI team made a change recently that broke this assumption?

Anyway, hope it is helpful. Your widget has been really useful to me.

Hi, LOVE your Date range picker!!!

I noticed a non-critical bug: Uncaught TypeError from line 437. I say non-critical as the plug-in still works. I'm on jquery.min 1.82. I put that if and its else inside of

if(  typeof offset !== 'undefined' ) {
    if ( offset.left < 460) //left to right
    ...
}

Other observation:
» It seems #date-range0 must start with 0 and must be numeric. This is what led me to look at the console and resulted in multiple Uncaught TypeErrors and non-functionality of the plug-in.

Uncaught TypeError: Cannot call method 'getDate' of null
daterangepicker.jQuery.js:169

When I use it with jQuery and PrototypeJS, I had to change all $ by Jquery to run it without problems.

Hi there,

I have problems using the onClose event to fetch the changed value of the input field.
It seems, that fetching the value directly in the onClose event sometimes gets the old version of dateEnd.
This doesn't happend, when I started using setInterval with 500ms.
(The problem only appeared for preset functions, dateRange was working perfect)

Debugging through the plugin code I found code lines 250 to 260 to be the problem.
So if I change:
rp.find('.range-start').datepicker('setDate', dateStart).find('.ui-datepicker-current-day').trigger('click');
rp.find('.range-end').datepicker('setDate', dateEnd).find('.ui-datepicker-current-day').trigger('click');
to
rp.find('.range-start').datepicker('setDate', dateStart);
rp.find('.range-end').datepicker('setDate', dateEnd);
rp.find('.range-start').datepicker().find('.ui-datepicker-current-day').trigger('click');
rp.find('.range-end').datepicker().find('.ui-datepicker-current-day').trigger('click');
everything works like expected.

So my main question about it:
Whats the best way to fetch changes of the input value and use it to call some more functionality?
The onChange event is absolutly useless because of running 2 times for a single change.

Would like to have an event firing only once for a range change.

Or is there a better solution to grep the values dateStart / dateEnd on change from outside?

Cheers

Mischosch

Hi, My client wants a down arrow on the input field to indicate that its a drop down/pop up, has anyone done something similar? Should I just put a down arrow image next to the text field and the hook on click into the picker?

When changing a single date value the onChange callback gets fired multiple times. This is leading to problems with our code, since we're making an Ajax request onChange.

The correct behavior would be to call onChange once on the completion of selecting dates.

No error, just adds a hidden div to the dom. Forcing it to not be display:none seems to work - but it gets stuck at the bottom of the page.

Can you make it possible to return an instance of the plugin that will allow me to call methods like hideRP(). for instance:

rp = $("#some_dom").datetrangepicker();

rp.hideRP();

When using the compressed code, i get the 'infinite loop' error while uncompressed version works ok.