We help IT Professionals succeed at work.

Get start and end dates with bootstrap daterangepicker

Russ Suter
Russ Suter asked
on
Pulling my hair out. I have this simple code:

var inspectMe = $("#dashboard-report-range").daterangepicker('getDate');
    alert(inspectMe);

Open in new window


inspectMe is an object but that's not what I need. I need to know the start and end dates in the daterangepicker. I can't find anything in the documentation that lets me select it. I must be missing something. Please help before I jump off a cliff.
Comment
Watch Question

Most Valuable Expert 2011
Top Expert 2015

Commented:
Not a direct answer to your question, but could you not just simply split the <input>'s text on the hyphen that DRP adds?
Most Valuable Expert 2011
Top Expert 2015

Commented:
After playing around with it a bit more, it seems like startDate and endDate are available to be accessed from the picker:

Screenshot
Russ SuterSenior Software Developer

Author

Commented:
I'm not following your example. The daterangepicker is already set up. I just need to get the date range from it. I'm not even sure how to find the correct element in the DOM.
Most Valuable Expert 2011
Top Expert 2015

Commented:
The DOM element with id "dashboard-report-range" is the one to which the DRP was associated. I'm guessing it's a text box. You should be able to inspect its val() via JQuery.
Senior Software Developer
Commented:
The only way I've found so far that I can get it would be

document.getElementsByName("daterangepicker_start")[0].value;

Open in new window


which will work fine as long as there's only one daterangepicker on the page. Not ideal but a viable workaround for now.
Most Valuable Expert 2011
Top Expert 2015

Commented:
Why wouldn't you just do:

var dateRange = $("#dashboard-report-range").val();

Open in new window


You're (obviously) already using JQuery.
Russ SuterSenior Software Developer

Author

Commented:
because it returns an empty value.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
You can pass a callback function into the constructor of your datarangepicker. The callback gets fired whenever a user changes the datarange, and send the start and end dates as arguments.

From the docs:

$('input[name="daterange"]').daterangepicker(
  { 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: '2013-12-31'
  },
  function(start, end, label) {
    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  }
);

Open in new window

Russ SuterSenior Software Developer

Author

Commented:
Chris, I'm already doing that but there are some times when I need to query the daterangepicker for the start and end dates outside of when the callback fires.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
OK. In your original post, you said that your were calling 'getDate' which returned an object. When you alert that out you just see 'object', rather than what's inside the object. Instead of using alert(inspectMe), write it to the console so that you can examine the properties of the object:

console.log(inspectMe);

In the browser console, you will then be able to see the properties of the returned object. So for example, if the object had a property called startDate, you could get to it's value like so:

alert(inspectMe.startDate);

Most modern browsers have a console, and usually pressing F12 will display it - you might have to dig around a bit but it should be there - Chrome, Firefox and IE all have one.
Russ SuterSenior Software Developer

Author

Commented:
This is the only thing that has worked. It's not ideal but it does produce a valid result (as long as there isn't another daterangepicker before this one on the page. I guess I'll just have to live with that limitation.