引导日期时间选择器改变方向答案

【问题标题】：boostrap datetimepicker change direction引导日期时间选择器改变方向
【发布时间】：2016-04-01 05:00:24
【问题描述】：

我使用引导日期时间选择器，需要从上到下更改位置。有什么线索吗？

<script>
    $(function () {
        $('.form_date').datetimepicker({
            format: 'DD-MM-YYYY',
            userCurrent:false,
            pickerPosition: "bottom-left"
        });
    });
</script>

如何将日期选择器位置更改为底部？那就是我想始终将日历打开为底部...

【问题讨论】：

标签： twitter-bootstrap datetimepicker

【解决方案1】：

您可以使用Bootstrap 3 Datepicker。它有 widgetPositioning 定义日历打开时的位置。此处示例：

$(function () {
    $('#datetimepicker1').datetimepicker({
      format: 'DD-MM-YYYY',
      widgetPositioning: { horizontal: 'left', vertical: 'bottom'}
    });
});

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

    <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
    <script type="text/javascript"  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我建议使用Bootstrap DateTime Picker的修改版：

特点：

支持自动发布。 选项： direction: auto|up|down。
新的选项： useCurrent: true|false （如果没有值）
新的选项： showToday: true|false
点击任何元素时自动显示。
当输入值改变时自动set Date/Time view。

在您的情况下，您可以添加方向选项direction: "down"：

<script>
$(function () {
    $('.form_date').datetimepicker({
        direction: "down",
        format: 'DD-MM-YYYY',
        userCurrent:false,
    });
});
</script>

参见JsFiddle 示例。 我希望它对你有用，谢谢！

【讨论】：