May-26-2021, 06:48 PM
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;
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
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/2021Attached Files
