Question

我可以在日历图标附近移动日期选择器???任何解决方案将不胜感激。 datepicker是动态生成的。

我已将id提供给div

<div class="datepick col-sm-6">
                            <div class='input-group date' id='datetimepicker1' >
                                <input type='text' class="form-control" placeholder="Select Start Date"/>
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                    </div>
    <script>
     $('#datetimepicker1').datepicker({
            autoclose: true,
            startDate: '-0m',
            todayHighlight: true
        }).on('changeDate', function(ev){
            $('#sDate1').text($('#datetimepicker1').data('date'));
            $('#datetimepicker1').datepicker('hide');
        });
    </script>

Answer 1

你需要的是一点点jquery

请参阅here

JQuery的

$('#datetimepicker1').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

关于datepicker的定位阅读here

Answer 2

只需使用以下代码示例;

$('#input').datepicker({
    orientation: "top right"
});

Answer 3

要更改默认的Bootstrap datetimepicker：

1-）来自Jquery

$("#datetimepicker1").datetimepicker({
     pickerPosition: 'top-left'
});

其他职位选项：左下角，右上角

Answer 4

您可以覆盖日期选择器的默认css类。将内联样式添加到日期选择器的div中，例如

变化

<div class="datepick col-sm-6">

到

<div class="datepick col-sm-6" style="position: absolute; left: 865.15px; display: block;">

它将覆盖默认的css。您需要为left属性尝试不同的值，以使其最适合表单。

Answer 5

插件中提供的“容器”选项可能会派上用场。您可以使用CSS在任何需要的位置定位日历。这是我在jsFiddle上创建的一个例子。

https://jsfiddle.net/giri_jeedigunta/6patf4L5/

HTML：

<div class="dt-cont">
  <input type="text" class="datepicker">
</div>
<div id="custom-pos"></div>

JS：

$('.datepicker').datepicker({
  container: '#custom-pos'
});

CSS：

#custom-pos {
  position: relative;
  right: -70px;
}
.dropdown-menu {
   left: auto !important;
}

移动bootstrap datepicker的位置

5 个答案: