Bootstrap 不同屏幕分辨率下的日期时间选择器截断

Question

我正在开发一个需要使用 bootstrap 日期时间 picker.it 的 mvc 应用程序，但它在 800 *1280 和 768*1024 分辨率下从侧面截断。

页面浏览量为

  <div class="col-sm-3">
            <div class="col-sm-12">date of birth</div>
            <div class="col-sm-12">
                <div class='input-group date'>
                    @Html.TextBoxFor(c => c.BIRTHDATE, "{0:MM/dd/yyyy}", new { @class = "date-picker form-control" })
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>

            </div>
        </div>

--------脚本-----

$(".date-picker").datepicker();

$('.date-picker').on('changeDate', function (ev) {
    $(this).datepicker('hide');
});

我们为此日期时间选择器使用 datepicker.css 和 jquery-1.11.0.js ,bootstrap.css。请提供解决此问题的解决方案。

Answer 1

在学习了很多之后，我终于 jquery 让它工作了。请查看以下代码

首先我们只处理 window 的调整大小事件，如下所示：

$(window).on("resize",function () {
    ApplyDatepicker();
});

然后我们将根据分辨率处理日期选择器方向：

function ApplyDatepicker()
 {
$('.date-picker').datepicker('hide');
$('.date-picker').blur();

if ($(window).width() >= 760) {
    $(".date-picker").datepicker({
        orientation: "auto right"
    });
}
else
{
    $(".date-picker").datepicker({
        orientation: "auto left"
    });
}

$('.date-picker').datepicker('update');

$('.date-picker').on('changeDate', function (ev) {
    $(this).datepicker('hide');
});}

应用此日期选择器后，现在会自动调整其位置。

Bootstrap 不同屏幕分辨率下的日期时间选择器截断

Bootstrap datetime picker Cutoff at different screen resolution

jquery

asp.net-mvc-4

twitter-bootstrap