如何使用Django将前端datetimepicker选择的日期时间存入数据库

我为我的网站开发了日期时间选择功能，用户可自主选择日期和时间，但我不清楚如何将该数据存入我已有的数据库中。

功能展示 #

现有前端代码（reception.html） #

<script>
      $(function () {
        $("#datetimepicker1").datetimepicker();
      });
    </script>
  <div  class="form-group m-3" >
       <h4> Hello {{ user.username }}, you are at the Reception Unserviceable Page</h4>
       <p>Select a date and Time</p>
    <div class="input-group date" style="width:300px" id="datetimepicker1" data-target-input="nearest">
      <input required name="datetime" type="text"  class="form-control datetimepicker-input" data-target="#datetimepicker1"  />
      <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>

第一步：补全前端提交逻辑 #

你当前的日期选择控件没有包裹在表单中，无法向后端提交数据，同时可将页面提示翻译为中文，修改后代码如下：

<!-- 新增form表单，action填你后端接收的路由地址，method用POST -->
<form action="/save-datetime" method="POST">
  <div class="form-group m-3" >
       <h4>你好 {{ user.username }}，你当前处于接待不可用页面</h4>
       <p>请选择日期与时间</p>
    <div class="input-group date" style="width:300px" id="datetimepicker1" data-target-input="nearest">
      <input required name="datetime" type="text"  class="form-control datetimepicker-input" data-target="#datetimepicker1"  />
      <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>
    <!-- 新增提交按钮 -->
    <button type="submit" class="btn btn-primary mt-3">提交时间</button>
  </div>
</form>

<script>
  $(function () {
    // 统一指定日期格式，避免前后端解析不一致
    $("#datetimepicker1").datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss'
    });
  });
</script>

第二步：后端接收并存储数据 #

这里以和你模板语法匹配的Flask+SQLAlchemy技术栈为例，其他后端框架逻辑基本一致：

1. 定义数据库表模型 #

from datetime import datetime
from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class UserSelectedTime(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    user_id = db.Column(db.Integer, nullable=False) # 关联提交用户的id
    selected_datetime = db.Column(db.DateTime, nullable=False) # 存储用户选择的时间
    created_at = db.Column(db.DateTime, default=datetime.utcnow)

2. 编写接收提交的路由 #

from flask import request, redirect, url_for
from datetime import datetime

@app.route('/save-datetime', methods=['POST'])
def save_datetime():
    # 获取前端提交的时间字符串
    datetime_str = request.form.get('datetime')
    # 转成datetime对象
    try:
        selected_time = datetime.strptime(datetime_str, '%Y-%m-%d %H:%M:%S')
    except ValueError:
        # 格式错误的处理逻辑，可自行调整为跳转回原页面加错误提示
        return "日期格式错误，请重新选择"
    
    # 存入数据库，这里默认你已经获取到当前登录用户的id
    new_record = UserSelectedTime(
        user_id = current_user.id,
        selected_datetime = selected_time
    )
    db.session.add(new_record)
    db.session.commit()
    
    # 提交成功后的跳转逻辑
    return redirect(url_for('reception_page'))

注意事项 #

• 建议统一用UTC时间存储，前端展示时再转成用户所在时区的时间，避免不同时区用户提交的时间混乱
• 务必添加参数校验逻辑，避免非法格式的字符串写入数据库引发异常
• 如果用AJAX异步提交，把表单改成serialize提交即可，核心逻辑和表单提交一致

内容的提问来源于stack exchange，提问作者Rainysky