CODEWITHSUNDEEP
javascriptjquery
devmonster
devmonster

Reputation: 474

Daterangepicker how can i get the value of predefined date range

I would like to get the value of my predefined daterange of my daterangepicker

I try to use .val() and .text() but not working please see code below

$(document).ready(function() {
  console.log($('#reportrange').find(":selected").val());
});
$(function() {

  var start = moment().subtract(6, 'days');
  var end = moment();

  function cb(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  }

  $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, cb);

  cb(start, end);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />

<div class="form-group">
  <label for="sel1">Date:</label>
  <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span>
  </div>
</div>

Upvotes: 1

Views: 2141

Answers (2)

Vikas Gupta
Vikas Gupta

Reputation: 1233

The reason, why you getting undefined is $(document).ready and $(function() { do run at same time and because of that, your daterangepicker may not be properly declared at that time. So, if you want to get the values, you can have them in callback function.

Matter of fact,

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

$(function() {

  var start = moment().subtract(6, 'days');
  var end = moment();
 var lstart,lend;
  function cb(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
       lstart = moment($('#reportrange').data('daterangepicker').startDate).toDate(),
       lend = moment($('#reportrange').data('daterangepicker').endDate).toDate();
       console.log(lstart,lend)
  }

  $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, cb);

  cb(start, end);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>
<div class="form-group">
  <label for="sel1">Date:</label>
  <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span>
  </div>
</div>

Now, From moment, you can get date in any format. Here is the fiddlelink

Upvotes: 2

Amarat
Amarat

Reputation: 630

First you fill date on page load than you will get it. Try this:-

$(document).ready(function() {

          var start = moment().subtract(6, 'days');
          var end = moment();

          function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
          }

          $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
          }, cb);

          cb(start, end);


        //get date_range  
        var date = $('#reportrange > span').text();
        alert(date);

});

Upvotes: 1

Related Questions