如何在请求后保存变量的值，但在第一次加载时有不同的值？

Question

I have a Flask application in which the user can select a desired period. The period has a start date and an end date. At the first load of the page, I want the start date to be the first of the current month, and the end date to be the current day. I used this code to make this work, where d1 is date of start and d3 is day of end:

$('#d1').val(today.getFullYear() + "-" + ('0' + (today.getMonth() + 1)).slice(-2) + "-" + ('0' + 1));
$('#d3').val(today.getFullYear() + "-" + ('0' + (today.getMonth() + 1)).slice(-2) + "-" + ('0' + (today.getDate())).slice(-2));

I want to be able to save the period selected by user after pushing the submit button. For now, after the user clicks the submit button, I have the start date as 1 of the month and the end date as the current day. This happens no matter what different dates the user selects. After submit, I want to be able to display start and end date as the dates selected by user. How to achieve this? I was thinking of using

$('[name=d1]').val("{{ request.form['d1'] }}");

But this resets the start date, making it mm/dd/yyyy at the very beggining, as there was no request. How to save the date after user selects it? But letting the dates selected at the first load of page as 1 of the month and current date.

Answer 1

You plenty of options to achieve that

If you're using Flask template engine to render the response you could set the dates before the response in the template.

assuming that the route where you want to submit the date is /

@app.route('/')
def index():
    start_date = request.form['start_date']
    end_date = request.form['end_date']
    ...
    return render_template('template_name.html', start_date=start_date, end_date=end_date )

in your template

<input type="date" value="{{start_date}}" />
<input type="date" value="{{end_date}}" />

Another option is to use localStorage directly on the client-side

Also, it depends whether you are using jquery submit or HTML form submit

if you are using jquery submit

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

then you should handle the change in the success callback

with something like

$('[name=d1]').val("{{ request.form['d1'] }}");

Hope that helps