getting the value of daterangepicker bootstrap

Question

Hi im new to using javascript and encountered a problem while using daterangepicker bootstrap. I manage do implement this demo that i got but I am stuck at getting the value of start date and end date from the javascript.

This is the javascript

<script type="text/javascript">
$(document).ready(function() {
    $('#reportrange').daterangepicker(
       {
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit: { days: 60 },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: {
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          }
       },
       function(start, end) {
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));

       }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
 });
</script>

This is the button which is going to handle to onclick method

<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>

'start' and 'end' would contain the values of the dates. If i want these values to serve as inputs for later use of coding in my project e.g. saving into database, how can i call them?

score 75 · Answer 1 · answered Jun 02 '15 at 00:01

75

$('#IDOfDateRangePicker').data('daterangepicker').startDate;
$('#IDOfDateRangePicker').data('daterangepicker').endDate;

answered Jun 02 '15 at 00:01

Razan Paul

13,618
3
69
61

3

this only returns the object. As `@Erdogan` explained use `.endDate.format('YYYY-MM-DD');` if you want to get exact value. – Jawand Singh May 22 '21 at 08:04

Jacques Snyman · Accepted Answer · 2013-10-29T07:38:24.447

Give your button an id

<button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal">Save changes</button>

Add startDate and endDate variables to your script

var startDate;
var endDate;

Set these variables in the daterangepicker callback

startDate = start;
endDate = end;

Wire up the click event for that button in your $(document).ready function

$('#saveBtn').click(function(){
    console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
});

The complete javascript

<script type="text/javascript">
var startDate;
var endDate;

$(document).ready(function() {
    $('#reportrange').daterangepicker(
       {
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit: { days: 60 },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: {
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          }
       },
       function(start, end) {
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
        startDate = start;
         endDate = end;    

       }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));

    $('#saveBtn').click(function(){
        console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
    });

 });
</script>

Hi thanks. It worked. I have another problem. If i want these values to serve as inputs for later use of coding in my project e.g. saving into database, how can i call them? — user2541163, Oct 29 '13 at 07:57
I'm not sure how JSP works, but the basic idea would be to add hidden fields to your HTML form for the start and end date, set the values of those much the same as I've set the `startDate` and `endDate` js variables above, and then submit the container form to your server. — Jacques Snyman, Oct 29 '13 at 08:57
can you also help me as by default it shows 2 months but i need to change it to 3 at dekstop and 1 on mobile how can i do it? — Gaurav Aggarwal, Apr 04 '16 at 07:08
it is giving this error in console TypeError: startDate is undefined console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYY.. it happens when i click first time but works fine when changed and clicked again — 3gth, Jun 15 '16 at 14:11

score 31 · Answer 3 · edited Oct 21 '15 at 12:04

31

var endDate=  $("#IDOfDateRangePicker").data('daterangepicker').endDate.format('YYYY-MM-DD');

or other formats;

.endDate.format('YYYY-MM-DD'); 

.endDate.format('D MM YYYY');

.endDate.format('D MMMM YYYY');

edited Oct 21 '15 at 12:04

Aleksandr M

24,264
12
69
143

answered Oct 21 '15 at 11:42

Erdogan

952
12
26

score 22 · Answer 4 · answered Oct 30 '15 at 16:35

You must retrieve the data object:

var startDate = $('#reportrange').data('daterangepicker').startDate._d;
var endDate = $('#reportrange').data('daterangepicker').endDate._d;

Notice the _d request at the end to get the actual, javascript date object.

Also, if the data object is ever undefined then it can be the result of bootstrap.js being re-instantiated. This happened to me on a MVC page where I forgot to surround my scripts with:

@region scripts {

}

score 5 · Answer 5 · answered Mar 29 '19 at 19:44

daterangepicker startDate and endDate returns moment objects not Javascript Date objects.

Here is how to transform a moment object into a date object:

let startDate = moment($('#selector').data('daterangepicker').startDate).toDate();
let endDate = moment($('#selector').data('daterangepicker').endDate).toDate();

Gabriel Glauber · Answer 6 · 2016-07-09T12:04:37.397

1

Simple, get direct the inputs range:

$(document).ready(function(){

    $('#reportrange span').bind('DOMSubtreeModified', function(e){
        alert('New value is: '+$('input[name=daterangepicker_start]').val()+' to '+$('input[name=daterangepicker_end]').val());
    });

})

edited Jul 09 '16 at 12:04

answered Jul 09 '16 at 00:03

Gabriel Glauber

961
11
9

score 1 · Answer 7 · answered Dec 10 '18 at 12:11

I know that this is not elegant at all. Sharing it anyway.

First, we get the daterangepicker input box value:

var date_range = $('#date_range').val();

Now if we configure to show the dates between a ' - ', let's split with it:

var dates = date_range.split(" - ");

to get the dates as strings:

var start = dates[0];
var end = dates[1];

to get the dates as Moment objects with a 'D MMMM YY' format:

var start = moment(dates[0],'D MMMM YY');
var end = moment(dates[1],'D MMMM YY');

getting the value of daterangepicker bootstrap

7 Answers7

The complete javascript

Linked