Bootstrap-weekpicker插件表单提交时保留显示值并提交yyyy-mm-dd格式日期

核心逻辑为显示值和提交值分离，通过新增隐藏表单字段存储后端需要的日期格式，原有显示字段不设置name属性避免被提交，不需要修改插件源码即可实现需求。

步骤1：修改HTML结构 #

新增隐藏input用于存储提交给服务端的yyyy-mm-dd格式日期，仅需要给该隐藏字段设置name属性：

<div class="row">            
    <div class="col-xs-12 col-md-12">Week / Year</div>
    <div class="col-xs-12 col-md-12">
        <div class="col-auto">
            <div class="input-group date align-items-center">
                <div class="input-group date align-items-center">
                    <div id="planning_weekpick"></div>
                    <!-- 新增隐藏提交字段，name属性可根据后端需求调整 -->
                    <input type="hidden" name="week_start_date" id="week_start_date" value="">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 原有资源引入保持不变 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/pingcheng/bootstrap4-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/pingcheng/bootstrap4-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js" type="text/javascript" ></script>
<script src="../js/bootstrap-weekpicker.min.js" type="text/javascript" ></script>

步骤2：调整JS初始化逻辑 #

监听周选择器的变更事件，将选中的周日期格式化后存入隐藏字段：

$(function () {
    $('#planning_weekpick').weekpicker()
    // 监听周选择变更事件
    .on('weekChange', function(e, date) {
        // 将周起始日期格式化为yyyy-mm-dd存入隐藏字段
        const submitDate = moment(date).format('YYYY-MM-DD');
        $('#week_start_date').val(submitDate);
    });
});

兼容备选方案 #

如果插件的weekChange事件未触发，可以直接监听显示输入框的内容变化，手动解析周数生成对应日期：

$(function () {
    $('#planning_weekpick').weekpicker();

    // 监听输入框内容变更
    $(document).on('change', '#planning_weekpick input', function() {
        const weekText = $(this).val();
        // 匹配"Week 41, 2021"格式的文本，提取周数和年份
        const matchRes = weekText.match(/Week (\d+), (\d+)/);
        if (matchRes) {
            const weekNum = matchRes[1];
            const year = matchRes[2];
            // 生成当年对应周的周一日期，若需要周日作为起始可替换startOf参数为'week'
            const submitDate = moment().year(year).isoWeek(weekNum).startOf('isoWeek').format('YYYY-MM-DD');
            $('#week_start_date').val(submitDate);
        }
    });
});

效果说明 #

• 用户侧输入框仍然显示Week XX, XXXX格式的周数，符合原有交互需求
• 表单POST提交时，仅会携带隐藏字段week_start_date的yyyy-mm-dd格式值，满足服务端参数要求
• 若需要提交周结束日期，可新增第二个隐藏字段，通过moment(date).add(6, 'days').format('YYYY-MM-DD')生成周结束日期赋值即可

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