Laravel模態框日期時間表單提交

前言

項目中實現了一個使用Bootstrap4模態框+Jquery日期時間插件+Ajax的表單，本文爲筆記帖。

效果

實現

技術棧

Laravel+Mysql+Bootstrap4+jQuery

步驟及代碼

第一步：模態框

<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">新建作業</button>
    <!-- 模態框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">新建作業</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addWork">
                        <div id="response"></div>
                        <div class="form-group">
                            <label for="classid">課程名：</label>
                            <select class="form-control" name="classid">
                                <option value="ABCDEFG">移動開發</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="start">起始時間：</label>
                            <input type="text" name="start" class="form-control datetimepicker-input" id="datetimepicker-start" data-toggle="datetimepicker" data-target="#datetimepicker-start"/>
                        </div>
                        <div class="form-group">
                            <label for="end">截止時間：</label>
                            <input type="text" name="end" class="form-control datetimepicker-input" id="datetimepicker-end" data-toggle="datetimepicker" data-target="#datetimepicker-end"/>
                        </div>
                        <div class="form-inline">
                            <label for="num">第&nbsp;<input type="number" name="num" class="form-control" min="1" max="10"/>&nbsp;次作業</label>
                        </div>
                        <br>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">關閉</button>
                            <button type="button" id="reset-button" class="btn btn-danger">重置</button>
                            <button type="button" id="submit-button" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

日期時間插件

其中，起始時間和截止時間使用的是這款jQuery插件：Tempus Dominus,這款插件提供了Bootstrap風格的日期時間表單控件，使用這款插件首先要引入相關CDN：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />

在表單中寫入如下代碼

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

這段代碼的重點是id的值，要和下面的JavaScript代碼匹配上

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
</script>

如果無誤，將有如下效果

當然，這款插件有着衆多配置項以應對不同需求，正如我需要將12小時制轉變爲24小時制，那麼需要在$('#datetimepicker1').datetimepicker();中datetimepicker()的參數出傳入option對象

$('#datetimepicker-start').datetimepicker({ 
    sideBySide: true,
    format:"YYYY-M-D H:mm" 
});

關於format的時間格式，具體細節可參考網址：Moment.js | Docs
其他配置項請查看官方網站：Tempus Dominus

重置按鈕

<button type="button" id="reset-button" class="btn btn-danger">重置</button>

    $('#reset-button').click(function () {
        $("#addWork input").val("");    //將表單的input的值清空
    })

第二步：Ajax響應

前端提交Ajax請求以及處理Json響應數據

    $("#submit-button").click(function (e) {
        e.preventDefault(); //阻止默認行爲
        let classid = $("select[name=classid]").val();
        let start = $("input[name=start]").val();
        let end = $("input[name=end]").val();
        let num = $("input[name=num]").val();
        $.ajax({
            type: 'POST',
            url: '/addwork',    //控制器路由
            data: {
                classid: classid,
                start: start,
                end: end,
                num: num
            },
            success: data => {
                console.log(data);
                alert(data.msg);    //與控制器return redirect()->json(['msg'=>'消息']);相關
            }
        });
    });

Tips:如果想使用Laravel中的validate表單驗證可以查看我以前的文章：Laravel中使用ajax

數據處理及返回Json數據

這一部分的功能對應Laravel中編寫的相關控制器代碼
WorkController.php

    public function store(Request $request){
        //新建作業表單驗證
        if($request['start'] == ''||$request['end'] == ''){
            return response()->json(['msg'=>'起止時間不能爲空！']);
        }
        if($request['num'] == ''){
            return response()->json(['msg'=>'作業次數不能爲空！']);
        }
        //將日期時間字符串轉換爲時間戳後比較大小
        $start = strtotime($request['start']);
        $end = strtotime($request['end']);
        if($start > $end ){
            return response()->json(['msg'=>'截止時間不能早於起始時間！']);
        }
        Work::create($request->all());  //操作模型，在數據庫中新建該條數據
        return response()->json(['msg'=>'作業新建成功！']);
    }

具體請看代碼註釋