獲取函數的結果作爲jQuery的字符串Datetimepicker

Question

使用jQuery Datetimepicker，我想根據窗口大小更改日期選擇器位置（具體來說：在較大的屏幕上顯示日期選擇器底部的大屏幕上顯示日期選擇器頂部在較小的屏幕上）

我試圖讓這個片段中合適的位置值，但它不工作（鉻告訴我，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>