Question

49

getting the value of daterangepicker bootstrap

rated 0 times [ 56] [ 7] / answers: 1 / hits: 132519 / 11 Years ago, tue, october 29, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quinn

Add To Favorites

Follow

Total Points: 160

Total Questions: 86

Total Answers: 101

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

answered 11 Years ago darennevina · Accepted Answer

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>