jquery实现根据所选时间生成页面元素

最近做项目，碰见这样的一个需求

根据所选的时间动态生成值班安排，日期格式需要带星期，如：

代码如下：

1、首先放两个文本框，时间插件用的是My97DataPicker，再放一个table，简单设置一下样式。

开始时间：<input id="StartDate" readonly="readonly" class="Wdate" type="text" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'EndDate\')}'})" /> --
结束时间：<input id="EndDate" readonly="readonly" class="Wdate" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'StartDate\')}'})" />
<input type="button" value="生成" onclick="CreateDuty()" /><br /><br />
<table border="0" cellspacing="0" id="dutyTable" cellpadding="0" class="table">
    <thead>
        <tr>
            <th width="33.4%">日期</th>
            <th width="33.3%">值班员</th>
            <th width="33.3%">值班电话</th>
        </tr>
    </thead>
    <tbody id="dutyContent">
        
    </tbody>
</table>

　　

<style type="text/css">
    table.table {
        margin-bottom: 0;
    }

    table thead tr th,
    table tbody tr td {
        text-align: center;
        border: 1px solid #DDD;
        height: 40px;
        padding: 8px;
        line-height: 16px;
        font-size: 14px;
        vertical-align: middle;
        color: #333;
    }

    table thead tr th,
    table > thead:first-child > tr:first-child > th {
        background: #f5f5f5;
        border-top: 1px solid #DDD;
    }

        table > thead:first-child > tr:first-child > th.tdCtrl,
        table thead tr th.tdCtrl,
        table tbody tr td.tdCtrl {
            background: #FFF;
            border: 1px solid #FFF;
        }

    table tbody tr td.tdCtrl {
        text-align: left;
        padding-left: 10px;
    }

    table tbody tr td p {
        margin-bottom: 0;
        font-size: 14px;
        color: #333;
    }
</style>

2、引入jquery,MyDate97Picker

<script src="../js/jquery-3.3.1.js"></script>
<script src="../plugins/My97DatePicker/WdatePicker.js"></script>

3、js代码

<script type="text/javascript">
    function CreateDuty() {
        var StartDate = $("#StartDate").val();
        var endDate = $("#EndDate").val();
        if (StartDate != "" && endDate != "") {
            StartDate = StartDate.replace(/-/g, "/");
            endDate = endDate.replace(/-/g, "/");
            //计算间隔天数
            var startNum = new Date(StartDate).getTime();
            var endNum = new Date(endDate).getTime();
            var dayNum = Math.abs(startNum - endNum) / (1000 * 60 * 60 * 24);
            //先清空，再填充
            $("#dutyContent").html("");
            //填充
            for (var i = 0; i <= dayNum; i++) {
                var currentDay = new Date(StartDate);
                currentDay.setDate(currentDay.getDate() + i);
                //设置星期
                var weekday = new Array(7);
                weekday[0] = "星期日";
                weekday[1] = "星期一";
                weekday[2] = "星期二";
                weekday[3] = "星期三";
                weekday[4] = "星期四";
                weekday[5] = "星期五";
                weekday[6] = "星期六";
                //表示月份的参数介于 0 到 11 之间，所以月份加1
                var timeFormat = (currentDay.getMonth() + 1) + "月" + currentDay.getDate() + "日（" + weekday[currentDay.getDay()]
+ "）";
                //自定义隐藏时间格式，供后台转换时间格式
                var hidDay = currentDay.getFullYear() + "/" + (currentDay.getMonth() + 1) + "/" + currentDay.getDate();
                $("#dutyContent").append("<tr>" + '<td><input type="hidden" name="txt_DutyDate" value="' + hidDay + '" />' + timeFormat + '</td><td><input type="text" name="txt_Leader" class="ipt mIpt" /></td><td><input type="text" name="txt_Person" class="ipt mIpt" /></td><td class="tdCtrl"></td>' + "</tr>");
            }
        }
        else {
            alert("请选择日期");
        }
    }
</script>

　　4、效果：