Question

我正在开发一个mvc应用程序，我需要使用bootstrap datetime picker.it工作正常，但它的分辨率为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来使它工作。请查看以下代码

首先我们将处理窗口的resize事件，如下所示：

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

然后我们将根据分辨率处理datepicker方向：

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日期时间选择器在不同的屏幕分辨率下截止

1 个答案: