• 0

    Use custom function for date ranges using the daterangepicker plugin

    by Asmin

    This is an example to use custom function for date ranges using the daterangepicker plugin

    
    function setDateRange(elementId, form, diff, diffType, singleDate){
      //Date range start
      $('#'+elementId).daterangepicker(
          {
            //showWeekNumbers: true,
            singleDatePicker: singleDate,
            showDropdowns: true,
            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')]
            },
            startDate: moment().subtract(diff, diffType),
            endDate: moment(),
            "opens": "center"
          },
          function (start, end) {
            $('#'+elementId+' span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
          }
      );
      $('#'+elementId).on('apply.daterangepicker', function(ev, picker) {
        $("#start-date").val(picker.startDate.format('YYYY-MM-DD'));
        $("#end-date").val(picker.endDate.format('YYYY-MM-DD'));
        $('#'+form).submit();
      });
        
      var $_GET = getQueryParams(document.location.search);
      //change the selected date range of that picker
      if($_GET['start-date'] != null && $_GET['end-date'] != null){
        //$('#'+elementId).data('daterangepicker').setStartDate(moment($_GET['start-date']));
        //$('#'+elementId).data('daterangepicker').setEndDate(moment($_GET['end-date']));
        //$('#'+elementId).daterangepicker({ startDate: moment($_GET['start-date']), endDate: moment($_GET['end-date']) });
        setSelectedDateRange(elementId, form, $_GET['start-date'],$_GET['end-date'],singleDate);
        cb(moment($_GET['start-date']), moment($_GET['end-date']));
      } else {
          cb(moment().subtract(diff, diffType), moment());
      }
      function cb(start, end) {
            $('#'+elementId+' span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
      }
      //Date range end
    }
    
    function setSelectedDateRange(elementId, form, startDate, endDate, singleDate){
      $('#'+elementId).daterangepicker(
          {
            //showWeekNumbers: true,
            singleDatePicker: singleDate,
            showDropdowns: true,
            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')]
            },
            startDate: moment(startDate),
            endDate: moment(endDate),
            "opens": "center"
          },
          function (start, end) {
            $('#'+elementId+' span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
          }
      );
    
      $('#'+elementId).on('apply.daterangepicker', function(ev, picker) {
        $("#start-date").val(picker.startDate.format('YYYY-MM-DD'));
        $("#end-date").val(picker.endDate.format('YYYY-MM-DD'));
        $('#'+form).submit();
      });
    }
    

    How to use:

    setDateRange('Form-btn1','listForm1',6,'days',false);
    setDateRange(''Form-btn2','listForm2',0,'days',true);
    setDateRange(''Form-btn3', 'listForm3', 1,'years',false);
    

    The dateranges plugin require the following css and js files.

    
    Include Required Prerequisites
    //cdn.jsdelivr.net/jquery/1/jquery.min.js"
    //cdn.jsdelivr.net/momentjs/latest/moment.min.js
    //cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css
     
     Include Date Range Picker
    //cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js
    //cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css
    


Leave a Comment

Please Login to insert comment.