前言

写这个的灵感来自于无意逛github上发现的，但是我发现作者的模型跟我所想的不太一样，所以想着把这个项目进行一定的更改和重写。谁知道挖了一个大坑，好在我最后写完了。。。

代码

直接放上代码分布图

这次并没有用Class Based View来写。。我还不太会写。所以用的还是functionView。bug我已经尽量地在修了。。可能还有其它bug，我还没发现

碰到的难题

其中我的数据库模型中，作业的发布是有最后提交日期的。所以在教师端发布作业的页面，一直为通过form的格式校验，导致创建的作业无法存入数据库，所以必须在前台规定时间输入的格式。

也就是图片所示情况

因此首先分享一个好网站：bootstrap4-timestamp

代码实现：

# form端实现，通过input_formats来规定form可以传入的格式
class AddHomeworkForm(forms.Form):
    name = forms.CharField(label="作业名", max_length=10,
                           widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': '作业名'}))
    classroom = forms.ChoiceField(label="分配的班级",
                                  choices=get_classroom(),
                                  widget=forms.Select(attrs={'class': 'form-control'}))
    cutoff = forms.DateTimeField(label="截止日期", input_formats=['%Y/%m/%d %H:%M'], widget=forms.DateTimeInput(
        attrs={'class': 'form-control datetimepicker-input','placeholder': '截止日期'}))

<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                {{ add_homework_form.cutoff }}
                <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>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker(
            {
                format: 'YYYY/MM/DD HH:mm'  //规定前台传入的格式，必须和forms规定的相同
            }
        );
    });
</script>

视频操作演示

视频演示地址

最后！

如果觉得这个项目还不错的话，欢迎github上给我小心心~

版权声明：本文为原创文章，版权归 heroyf 所有。
本文链接：https://heroyf.club/2019/02/submit_homework_online/