Python Forum
Unable to access the user input value given to daterangepicker
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Unable to access the user input value given to daterangepicker
#1
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>&nbsp;
<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.

Attached Files

.html   date_picker.html (Size: 2.76 KB / Downloads: 96)
Reply
#2
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 likes this post
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Unable to access jarfile Rakshan 2 360 Jul-28-2021, 11:10 AM
Last Post: Rakshan
  Problem restricting user input in my rock paper scissors game ashergreen 6 1,110 Mar-25-2021, 03:54 AM
Last Post: deanhystad
  LinkedList by User Input SantiagoPB 5 1,152 Mar-03-2021, 09:54 PM
Last Post: deanhystad
  User input/picking from a list AnunnakiKungFu 2 672 Feb-27-2021, 12:10 AM
Last Post: BashBedlam
  Unable to execute input(). jahuja73 5 895 Feb-18-2021, 07:41 AM
Last Post: bowlofred
  Generate Random operator, take user input and validate the user mapypy 4 845 Feb-03-2021, 08:41 PM
Last Post: nilamo
  Unable to understand how given code takes a fixed input value, without inputting. jahuja73 4 792 Jan-28-2021, 05:22 PM
Last Post: snippsat
  Loop back through loop based on user input, keeping previous changes loop made? hbkpancakes 2 1,080 Nov-21-2020, 02:35 AM
Last Post: hbkpancakes
  user input for multi-dimentional list without a prior iteration using input() Parshaw 6 955 Sep-22-2020, 04:46 PM
Last Post: Parshaw
  How to time a user's input Tbot1000 2 1,082 Aug-31-2020, 09:39 PM
Last Post: Larz60+

Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020