•  0
    JQuery

    Use custom function for date ranges using the daterangepicker plugin

      Asmin Jismun    524        0        Report content

    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.

 

Facebook Conversations