Unable to access the user input value given to daterangepicker - Printable Version +- Python Forum (https://python-forum.io) +-- Forum: Python Coding (https://python-forum.io/forum-7.html) +--- Forum: General Coding Help (https://python-forum.io/forum-8.html) +--- Thread: Unable to access the user input value given to daterangepicker (/thread-33781.html) |
Unable to access the user input value given to daterangepicker - klllmmm - May-26-2021 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 Appreciate it if someone can help me to achieve accessing the daterangepicker input values into python.
RE: Unable to access the user input value given to daterangepicker - nilamo - May-26-2021 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.
|