javascript - How to set a date from date picker and fetch it from the REST API?

Question

on the backend. I set a filter for my data. Where I can filter the dates from the REST API url.

class RainfallFilter(filters.FilterSet):
    start_date = DateFilter(field_name='timestamp', lookup_expr='gt')
    end_date = DateFilter(field_name='timestamp', lookup_expr='lt')
    date_range = DateRangeFilter(field_name='timestamp')

    class Meta:
        model = Rainfall
        fields = []

class RainfallView(generics.ListCreateAPIView):
    serializer_class = RainfallSerializer
    queryset = Rainfall.objects.all()
    filterset_class = RainfallFilter

    def get(self, request, *args, **kwargs):
        queryset = self.filter_queryset(self.get_queryset())
        serializer = RainfallSerializer(queryset, many=True)
        return Response(serializer.data)

What I want to happen is from my chart.js, I want to display to my chart what I selected start and end dates. or date_range.

That I have a date picker on my frontend UI that If I select, dates start_date=2020-01-20 to end_date=2020-01-25. it will only show data from 20-25.

How am I gonna do it?

  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [{% for i in qs %}'{{i.timestamp}}',{% endfor %}],
      datasets: [{
        label: 'Rainfall Graph',
        data: [{% for i in qs %}'{{i.amount}}',{% endfor %}],
        lineTension: 0,
        backgroundColor: 'transparent',
        borderColor: '#c9c5c5',
        borderWidth: 2,
        pointRadius: 1,

      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        display: false
      }
    }
  })
}());

question from:https://stackoverflow.com/questions/65908323/how-to-set-a-date-from-date-picker-and-fetch-it-from-the-rest-api

Answer 1

Waitting for answers