Python Forum

In an HTML web form, I want to access the user-selected date range (backend is in python django framework, I'm referring the daterange picker examples in this page http://www.daterangepicker.com/#example4)

However, when I check value assigned to name variable it shows 'none'.

My HTML content is as follows;
[inline]
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<body>
<h2>My Test Page</h2>
<div id="container" >
<form method="post" >
{% csrf_token %}

<p>reportrange <input type="text" name="selectedPeriod" id="reportrange" class="form-control" />
<i class="fa fa-calendar"></i> 
<span ></span> <i class="fa fa-caret-down"></i>
</p>

</form>
</div>

<script>
$(function() {

var start = moment().subtract(29, 'days');
var end = moment();

function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
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')]
}
}, cb);

// The event listener here.
$('#reportrange').on('apply.daterangepicker', (e, picker) => {
console.log('The value has changed.');
});

cb(start, end);

});
</script>
</body>
</html>
[/inline]

My Views.py file content where I try to access the selected date range value using its name is as follows;

from django.shortcuts import render
from django.http import HttpResponse


# Create your views here.
def index(request):
    
    if request.method=="POST":
        selectedPeriod = request.POST['selectedPeriod']
        print('selectedPeriod', str(selectedPeriod))
    
    
    test = "My Test"
    context= {'test': test}
    return render(request, "index.html", context)

However when I run the django server (python manage.py runserver ), select a date range in HTML value, it python idel I'm expecting to see the value I selected, but nothing shows.
Then add onchange="form.submit();" into the HTML input tag content. However then HTML page daterangepicker input box is keeps refreshing continuously, and printing the default value in the python idel

Error:Django version 3.2.3, using settings 'testDatepicker.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[27/May/2021 00:01:12] "GET / HTTP/1.1" 200 8245
selectedPeriod 04/28/2021 - 05/27/2021
[27/May/2021 00:01:12] "POST / HTTP/1.1" 200 8245
selectedPeriod 04/28/2021 - 05/27/2021
[27/May/2021 00:01:13] "POST / HTTP/1.1" 200 8245
selectedPeriod 04/28/2021 - 05/27/2021

Appreciate it if someone can help me to achieve accessing the daterangepicker input values into python.

The easy answer is probably just adding a submit button to the form. onchange() fires repeatedly because that's how the datepicker sets a value. So something as simple as <button type="submit">Submit</button> would be enough to let you test it quickly.

klllmmm

nilamo