时间戳

首页 > 解决方案 > 更改引导日期选择器位置不起作用

html - 更改引导日期选择器位置不起作用

问题描述

我有这些日期选择器，我想将每个日期选择器的位置移动到每个输入的右侧，而不是在左侧。我尝试了很多 CSS 解决方案，但似乎没有任何效果。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>

</head>
<body>

       
        <div class="form-group col-md-6">
          <label for="inputPassword4">                beginning date
        </label>
          <input dir="rtl" type="text" class="form-control"  id="beginning_date" name="beginning_date">
        </div>

        <div class="form-group col-md-6">
          <label for="inputEmail4">                ending date
        </label>
          <input dir="rtl" type="text" class="form-control"  id="ending_date" name="ending_date">
        
      </div>
<script type="text/javascript">
$(function () {
    
$('#beginning_date').datepicker({
      language: 'fr'})
    
$('#ending_date').datepicker({
      language: 'fr'})
});
</script>
</body>
</html>

标签： htmlcsstwitter-bootstrapdatepicker

解决方案

只需使用orientation: 'right'

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>

</head>

<body>


  <div class="form-group col-md-6">
    <label for="inputPassword4">                beginning date
        </label>
    <input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
  </div>

  <div class="form-group col-md-6">
    <label for="inputEmail4">                ending date
        </label>
    <input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">

  </div>
  <script type="text/javascript">
    $(function() {

      $('#beginning_date').datepicker({
        language: 'fr',
        orientation: 'right'
      })

      $('#ending_date').datepicker({
        language: 'fr',
        orientation: 'right'
      })
    });
  </script>
</body>

</html>

我们可以使用oreientation: 'top right'在输入顶部而不是底部显示日期选择器。

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>

</head>

<body>


  <div class="form-group col-md-6">
    <label for="inputPassword4">                beginning date
        </label>
    <input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
  </div>

  <div class="form-group col-md-6">
    <label for="inputEmail4">                ending date
        </label>
    <input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">

  </div>
  <script type="text/javascript">
    $(function() {

      $('#beginning_date').datepicker({
        language: 'fr',
        orientation: 'top right'
      })

      $('#ending_date').datepicker({
        language: 'fr',
        orientation: 'top right'
      })
    });
  </script>
</body>

</html>

推荐阅读