Question

使用jQuery Datetimepicker，我想根据窗口大小更改datepicker位置（具体来说：在较大的屏幕上显示位于底部的datepicker，在较小的屏幕上显示datepicker）

我正在尝试使用此代码段获得正确的位置值，但它不起作用（Chrome告诉我widgetPositioning() vertical variable must be a string）：

var position = $(window).resize(function(){
    return ($(window).width() <= 480) ? 'top' : 'auto';
}).resize();

$(".datetimepicker").datetimepicker({
    widgetPositioning: {
        vertical: position
    }
})

我哪里错了？这是一个可在

上播放的可运行代码

var position = $(window).resize(function(){
    return ($(window).width() <= 480) ? 'top' : 'auto';
}).resize();

$(".datetimepicker").datetimepicker({
    widgetPositioning: {
        // vertical: position // doesn't work
        vertical: 'top'        
    }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<br><br><br><br><br><br>
<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <div class="input-group date datetimepicker">
        <input type="text" class="form-control">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>

Answer 1

我就是这样做的。它不会修复您的代码，但会对其进行修改。试一试？

var position = "auto";

$(window).resize(function(){

console.log(position);

 var width = $(window).width();

    if(width <= 600) {
      position = "top";      
    } else {
      position = "auto";
    }
   
});

$(".datetimepicker").datetimepicker({
    widgetPositioning: {
        vertical: position // doesn't work  
        //vertical: 'top'        
    }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<br><br><br><br><br><br>
<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <div class="input-group date datetimepicker">
        <input type="text" class="form-control">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>

获取函数的结果作为jQuery Datetimepicker的字符串

1 个答案: