0

我正在构建一个简单的休假管理系统，并且在处理 AdminLTE for Flask（https://appseed.us/admin-dashboards/flask-dashboard-adminlte）时遇到问题，日期时间选择器基于 Tempus Dominus Bootstrap 4（https ://getdatepicker.com/5-4/）

当我执行表单提交时，其他字段已提交，但date_fromand中的数据date_to没有提交到数据库。

我可以看到我的终端窗口显示“POST 302”并根据我的路由重定向到索引。

这是我的forms.py

class LeaveApplicationForm(FlaskForm):
    leavetype = SelectField('Leave Type', choices=[('1', 'Medical Leave'), ('2', 'Annual Leave'),
                                                   ('3', 'Compassionate Leave'), ('4', 'Unpaid Leave')], validators=[DataRequired()])
    date_from = DateField('From', id='date_from', format='%m-%d-%Y')
    date_to = DateField('To', id='date_to', format='%m-%d-%Y')
    description = TextAreaField('Reason')
    submit = SubmitField('Apply')

这是我的routes.py

def leaveapplication():
    form = LeaveApplicationForm()
    if form.validate_on_submit():
        leave = LeaveApplication(user_id=current_user.id ,leavetype_id=form.leavetype.data,
                                 date_created=datetime.utcnow(), date_from=form.date_from.data, date_to=form.date_to.data,
                                 description=form.description.data)

        db.session.add(leave)
        db.session.commit()
        flash('Your application has been sent.')
        return redirect(url_for('home_blueprint.index'))
    else:
        return render_template('leaveapplication.html', form=form)

下面是带有javascript的html

    $(function () {

      //Date range picker
      $('#date_from').datetimepicker({
          format: 'L'
      });
    })

    $(function () {

      //Date range picker
      $('#date_to').datetimepicker({
          format: 'L'
      });
    })

<form action="/leaveapplication" method="post">
          {{ form.hidden_tag() }}
          <div class="form-group">
            {{ form.leavetype.label }}<br>
            {{ form.leavetype }}<br>
          </div>
          <div class="form-group">
            <label>{{ form.date_from.label }}</label>
              <div class="input-group date" id="date_from" data-target-input="nearest">
                  <input type="text" class="form-control datetimepicker-input" data-target="#date_from"/>
                  <div class="input-group-append" data-target="#date_from" data-toggle="datetimepicker">
                      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                  </div>
              </div>
          </div>
          <div class="form-group">
            <label>{{ form.date_to.label }}</label>
              <div class="input-group date" id="date_to" data-target-input="nearest">
                  <input type="text" class="form-control datetimepicker-input" data-target="#date_to"/>
                  <div class="input-group-append" data-target="#date_to" data-toggle="datetimepicker">
                      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                  </div>
              </div>
          </div>
          <div class="form-group">
            <label>{{ form.description.label }}</label>
              <textarea class="form-control" name="description" rows="3" placeholder="Provide comments for your approver"></textarea>
          </div>
          <button class="btn btn-primary" type="submit">Apply</button>
        </form>

当我检查我的浏览器 > 网络 > 请求时，我看不到date_to和 `date_from 内部表单数据。附图。

我想就如何处理这个 datetimepicker 寻求建议，但仍然使用 Tempus Dominus

browser_inspect_request_screenshots

4

0 回答 0