daterangepicker

by Swapnil Navalakha

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css">
<!-- Date and time range -->
<div class="form-group">
  <label>Date range button:</label>

  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="daterange-btn" style='width:230px'>

        <i class="fa fa-calendar"></i>&nbsp; <span>defaut date</span>

      <i class="fa fa-caret-down"></i>
    </button>
    <button id='btnDec' type="button" class="btn btn-danger btn-flat" title='Decrement month'><i class="fa fa-calendar-minus-o" aria-hidden="true"></i></button>
    <button id='btnInc' type="button" class="btn btn-info btn-flat" title='Increment month'><i class="fa fa-calendar-plus-o" aria-hidden="true"></i></button>

  </div>
</div>
<!-- /.form group -->

JavaScript

//var start = ''; //moment().startOf('month');
//var end = ''; //moment().endOf('month');
//var label = '';

var start = moment().startOf('month');
var end = moment().endOf('month');
var label = '';

    $('#daterange-btn').daterangepicker({
    		locale: {
            format: 'DD MMM YYYY'
        },
        maxDate: '10-Jan-2020',
       singleDatePicker: true
       
    }, 
    function(start, end, label) {
      if(isDate(start)){
        $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
      }
    });
    
    $('#btnInc').click ( function(e) {
    	IncDecMonth('Inc')
    })
    
	$('#btnDec').click ( function(e) {
    	IncDecMonth('Dec')
    })

function isDate(val) {
    //var d = new Date(val);
    //return !isNaN(d.valueOf());
    var d = Date.parse(val);
    console.log(d);
    return Date.parse(val);
}

    function IncDecMonth(Action) {
      if(!isDate(start)){
      	start = moment().startOf('month');
      }
    	if(Action == 'Inc'){
      	start = moment(start).add(1, 'month').startOf('month');
        end =  moment(start).endOf('month')
      }
      else
      {
        start = moment(start).subtract(1, 'month').startOf('month');
        end =  moment(start).endOf('month')
      }
      if(isDate(start)){
        $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
      }
			console.log('start='+start)
      console.log('end='+end)
    }
    
    IncDecMonth();