Question

我使用bootstrap datetimepicker，需要从上到下更改位置。任何线索？

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

如何将datepicker位置更改为bottom？那就是我想打开日历作为底部...

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

<强> 特点：

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

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

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

请参阅JsFiddle示例。 我希望它适合你，谢谢！

boostrap datetimepicker改变方向

2 个答案: