2016-04-01 13 views
1

私はブートストラップdatetimepickerを使用して、上から下に位置を変更する必要があります。どんな手掛かり ?ブーストラップdatetimepicker方向を変更

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

日付ピッカーの位置を下に変更するにはどうすればよいですか?それは私がブートストラップのDateTimeピッカーの修正版を使用することをお勧め...私はいつも一番下として、カレンダーを開きたい

答えて

0

です:

特長:

  1. サポートオートPostion。 オプション:direction: auto|up|down
  2. オプション:useCurrent: true|false(値なしの場合)
  3. オプション:任意の要素をクリックすると表示showToday: true|false
  4. オート。
  5. 自動set Date/Time view入力値が変更された場合。あなたはdriectionオプションdirection: "down"を追加することができ、あなたのケースで

は:

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

JsFiddle例を参照してください。 私はそれがあなたのために働くことを祈っています、ありがとう!

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>