Bootstrap模态框中JTSage DateBox显示异常与日期值获取问题

无输入框模式初始化失败问题 #

使用常规模式（显示文本输入框、点击输入框触发）时，JTSage DateBox日期选择组件可正常弹出；但使用无输入框显示模式时，按文档编写的初始代码完全无法展示组件，初始代码如下：

<div class="form-group">
    <div class="input-group" style="display:none">
        <input id="calDate" type="text" class="form-control" data-role="datebox" data-options='{"mode":"flipbox","useInline":"true","hideInput:"true"}' readonly="readonly">
    </div>
</div>

排查方向：是否遗漏必要配置项？

JS初始化后初始日期定位异常 #

调整为通过JS代码初始化组件后，日期选择器可正常展示，初始化代码如下：

<input id="calDate" type="text" class="form-control" data-role="datebox" readonly="readonly">

<script>
$('#calDate').datebox({
    mode: "flipbox",
    useLang: "id",
    overrideSetDateButtonLabel: "Atur tanggal",
    useInline: "true",
    useInlineAlign: "center",
    hideInput: "true",
    beforeOpenCallback: "abc",
    beforeOpenCallbackArgs: "def",
    openCallBack: "ghi",
    openCallBackArgs: "jkl",
    closeCallBack: "mno",
    closeCallBackArgs: "pqr",
});
</script>

此时出现新异常：组件初始加载时不会自动定位到当前日期，需要手动对日期选择器做交互操作才会跳转至当前日期。

模态框场景专属异常排查 #

经多场景测试，上述初始日期定位异常仅在日期选择器放在modal-body内部时出现，脱离模态框单独使用时组件运行完全正常，完整复现代码如下：

<body>
<button type="button" id="call" class="btn btn-primary">ABC</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Detail</h4>
            </div>
            <div class="modal-body" id="modal-content">
                <div class="form-group">
                    <div class="input-group">
                        <input id="calDate" type="text" class="form-control" data-role="datebox" readonly="readonly">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
$("#call").click(function(e){
    $("#myModal").modal("show");
});

$('#calDate').datebox({
    mode: "flipbox",
    useLang: "id",
    overrideSetDateButtonLabel: "Atur tanggal",
    useInline: "true",
    useImmediate: "true",
    useInlineAlign: "center",
    hideInput: "true",
    beforeOpenCallback: "abc",
    beforeOpenCallbackArgs: "def",
    openCallBack: "ghi",
    openCallBackArgs: "jkl",
    closeCallBack: "mno",
    closeCallBackArgs: "pqr",
});
</script>
</body>

flipbox模式选中值获取问题 #

当前使用flipbox模式，点击设置日期按钮时，如何获取用户选中的日期值？

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