日期选择器，将 window 放在右边

Question

我在项目中使用 Angular 13、Bootstrap 5 和 ngx-bootstrap-fix-datepicker 版本 5。

"bootstrap": "^5.1.3",
"ngx-bootstrap": "^8.0.0",
"ngx-bootstrap-fix-datepicker": "^5.6.8",

我的问题：我想将日历放在右边并缩小 window。你觉得可能吗？因为我不知道。

datePicker - image

<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <label for="startDate" class="form-label">Date de départ</label>
   </div>
   <div class="col-4">
      <input type="text " class="form-control form-max-width " name="startDate " [(ngModel)]="startDate " bsDatepicker [maxDate]="endDate " [required]="!!endDate " autocomplete="off ">
   </div>
</div>

Answer 1

angular更新：

您可以将 placement 属性添加到您的输入标签中，例如：

<input type="text " class="form-control form-max-width " name="startDate " [(ngModel)]="startDate " bsDatepicker [maxDate]="endDate " [required]="!!endDate " autocomplete="off " placement="right">

您可以使用的其他选项是“左|右|下|上”

旧答案：

您可以使用以下所有方法 JavaScript 来偏移上边距和左边距。确保更新变量名称以匹配您自己的名称。

$('input.date').datepicker({
    beforeShow: function(input, inst) {
        inst.dpDiv.css({
            marginTop: -input.offsetHeight + 'px', 
            marginLeft: input.offsetWidth + 'px'
        });
    }
});

日期选择器，将 window 放在右边

datepicker, place the window to the right

css

angular

bootstrap-5