関数の結果をjQuery Datetimepickerの文字列として取得

Question

jQuery Datetimepickerを使用して、ウィンドウサイズに基づいて日付ピッカーの位置を変更したいと思います（具体的には、大画面の場合はdatepickerを表示し、小さい画面の場合は上にdatepickerを表示します）

（クロム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>