HTML, how to auto select the date time picker from sql database

Question

I've a HTML form for editing existing data.

Let's say today is 10/06/2022 18:05 and i want to edit my course date time in my web app. My course date on the data base is 21/08/2023 10:00. I want to change it to 22/08/2023 10:00. When I open my from on the web app all the inputs came with the existing data already selected. But date time picker comes as 10/06/2022 18:05. I've set the value as the date attribute of course object but it's not working. This works for the rest of the inputs but not for the datetime input.

I basically need the html date time picker comes with autoselected with the existing saved data <course.date> .

I'm writing this web app on python flask and using a postgresql for database. The other inputs comes with selected values but not datetime input.

Anyone has any ideas how to approach this one?

<form action="/courses/{{course.id}}" method="post">
    <label for="course">Course Title</label>
    <input type="text" name="title" value="{{course.title}}">

    <label for="date">Date</label>
    <input type="datetime-local" name="date"  value="{{course.date}}">

    <label for="capacity">Capacity</label>
    <input type="number" name="capacity" value="{{course.capacity}}">

    <label for="active">Active</label>
    <select name="active">
        <option value="True">Active</option>
        <option value="False" {% if course.active == False %} selected {%endif%}>Deactive</option>
    </select>

    <input type='submit' value="Update Course">
</form>

Answer 1

If I am understanding the issue right:

• course_date in the database is: 21/08/2023 10:00
• course_date in the app remains as the local-current time: 10/06/2022 18:05 (example)
• GET request properly loads data from the database into the other fields except course-date
• you've tried making a POST request to update course_date , but the field doesn't change

My suggestion to debug this is to look at the responses to your GET request. What do they come out as?

Inside your GET request's response,

1. if the course-date is 21/08/2023 10:00 , that means your problem is in your javascript or the code that plugs in your field value inside the HTML. Your frontend field is simply ignoring the response from flask or the data is not being mapped/handled right
2. if the course-date is 10/06/2022 18:05 or is null. That means your flask backend is broken, double-check the flow of your data from the SQL select -> storing the data in a python variable -> sending the data out

Also remember to Hard-Reload .

Answer 2

Based on our exchange in comments, it looks like the issue is with the date format being passed in your template.

Changing:

   <label for="date">Date</label>
    <input type="datetime-local" name="date"  value="{{course.date}}">

To:

   <label for="date">Date</label>
    <input type="datetime-local" name="date"  value="{{course.date.isoformat()}}">

Should correct the problem for you.