Bootstrap Datepicker questions

mihalisp

I have 2 datepickers in 'el' format and when i select a date,they filter a datatable (data[4], date with time) as follows:

      $.fn.dataTable.ext.search.push(
      function (settings, data, dataIndex) {
      var min = $('#apo').datepicker("getDate");
      var max = $('#ews').datepicker("getDate");
      var startDate = new Date(data[4]);
      if (min == null && max == null) { return true; }
      if (min == null && startDate <= max) { return true;}
      if (max == null && startDate >= min) {return true;}
      if (startDate <= max && startDate >= min) { return true; }
      return false;
       });

When the page loads,the 2 datepicker have NULL values and the datatable shows all records.

When i select a date from the datepickers,the filters work ok but the dates i get (with console.log) are like this:

        Date 2018-10-31T22:00:00.000Z 

and in console it appears many many times, around 100 times.Why?

I would like the date from the 2nd datepicker to add +1 day to the selected date, so that i can filter in the right way,because if i choose the same day in both datepickers it returns 0 records.How can i achieve that?

Finally,the time i get from Datepicker is UTC time.Here,we are +02:00 ,how can i make it show the right time and not UTC?Should i use moment.js?

Thank you.

colin

Hi @mihalisp ,

I'm guessing it's displaying once for every row in the table, since the search is used against each row.

If that's not the case, we're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

mihalisp

I finally managed to make it work with this code:

         $.fn.dataTable.ext.search.push(
         function (settings, data, dataIndex) {
          //var min = $("#apo").datepicker.val(); returns string not Date
          //var max = $("#ews").datepicker.val();
          var min = $('#apo').datepicker("getUTCDate");
          console.log(min);
          var max = $('#ews').datepicker("getUTCDate");
          if ( max !== null) { max.setDate(max.getDate()+1) ; }
          console.log(max);
          console.log(typeof max);
          var startDate = new Date(data[4]);
          if (min == null && max == null) { return true; }
          if (min == null && startDate <= max) { return true;}
          if (max == null && startDate >= min) {return true;}
          if (startDate <= max && startDate >= min) { return true; }
          return false;
    }
    );

Thank you.