How to add filter to DataTable to filter records by date-picker (Vue.js)

alexdomente

Hello to everyone, I am new here and I need a little help of you, I have a datatable (jquery) in Vue component so I want to add a datepicker to filter the rows by date ( not necessary date range), thank for any help.

HTML

<table class="table table-hover text-center table-bordered" id="datatable" >
        <thead>
          <tr>
            <th class="text-center" scope="col">Nº Processo</th>
            <th class="text-center" scope="col">Episódio</th>
            <th class="text-center" scope="col">Modulo</th>
            <th class="text-center" scope="col">Nome</th>
            <th class="text-center" scope="col">Data de Nascimento</th>
            <th class="text-center" scope="col">Posto</th>
            <th class="text-center" scope="col">Data Marcação</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="(patient, idx) in patients" :key="idx">
            <td>{{ patient.NUMPROCESSO }}</td>
            <td>{{ patient.EPISODIO }}</td>
            <td>{{ patient.MODULO }}</td>
            <td>{{ patient.NOMEDOENTE }}</td>
            <td>{{ patient.DATANASCIMENTO | formatDate }}</td>
            <td>{{ patient.POSTO }}</td>
            <td>{{ patient.DATAMARCACAO | formatDate }}</td>

SCRIPT

export default {
  name: "Table",
  data() {
    return {
      patients: [],
      infos: [],
    };
  },

  mounted() {
    axios
      .get("patient")
      .then((response) => (this.patients = response.data.data))
      .catch((error) => console.log(error));
    setTimeout(() => {
      $("#datatable").DataTable({
        lengthMenu: [
          [10, 25, 50, -1],
          [10, 25, 50, "All"],
        ],
        pageLength: 10,
      });
    }, 60);
  }

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

This example here should help. It is showing a range, but you'll get the principle of how the DateTime element should be used,

Colin