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?

Solution 1

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>  

Solution 2

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

Solution 3

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');

Solution 4

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 {

}

Solution 5

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();

View more solutions

Comments

[user2541163]

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?

[Jacques Snyman]

What are you using on the server side? PHP? ASP.NET?

[Jacques Snyman]

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.

[Gaurav Aggarwal]

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?

[3gth]

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

[Jawand Singh]

this only returns the object. As @Erdogan explained use .endDate.format('YYYY-MM-DD'); if you want to get exact value.