Angular 6 和 bootstrap 4：日期选择器答案

【问题标题】：Angular 6 and bootstrap 4: date pickerAngular 6 和 bootstrap 4：日期选择器
【发布时间】：2018-07-05 12:19:59
【问题描述】：

我有一个包含日期选择器/日历、电子邮件、城市名称和酒店名称的表单，我希望用户选择一个日期并输入其他字段并提交数据。

这就是我所拥有的。

HTML：

 <form [formGroup]="angForm" class="form-element">
        <div class="form-group">
          <label for="dateOfBirth">Date of Birth</label>
          <input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth" type="text" bsDatepicker class="form-control" />
        </div>

        <div class="form-group form-element_email">
          <input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
        </div>
        <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['email'].errors.required">
            Email is required.
          </div>
        </div>
        <div class="input-group mb-3 form-element_city">
          <select class="custom-select" id="inputGroupSelect01" #cityName>
            <option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>

          </select>
        </div>
        <div class="input-group mb-3 form-element_hotel">
          <select class="custom-select" id="inputGroupSelect01" #hotelName>
            <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>

          </select>
        </div>
        <div class="form-group">
          <button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
            [disabled]="!validEmail">Book</button>
        </div>
      </form>

这显示了以下结果：错了一个

我只想在左侧显示完整的日历，而不是使用日期选择器进行输入，

这就是我想要的。很好

我在网上尝试了很多解决方案我都无法解决我的问题，

我需要在我的代码中进行哪些更改才能获得我想要的结果？请我是新手，谢谢

【问题讨论】：

它并没有真正显示错误的。这就是日期选择器从引导程序中工作的方式。您真正要寻找的是一个完全不同的组件，您可以使用它。这是一个非常花哨的日历组件mattlewis92.github.io/angular-calendar/#/kitchen-sink。但本质上你正在寻找类似的东西。可用于选择日期的单独组件，而不是内置于输入框中的组件。
嗨，我看到了，但我不喜欢它的设计方式，除了厨房水槽，没有其他插件或类似的东西吗？
这是一个例子，有人用 angularjs 和材料做的。 stackoverflow.com/questions/34947571/… 。要点是基本上总是显示日期选择器。在检查了 ngx 的 datepicker 代码后，看起来 bs-datepicker-container 是 datepicker 本身的组件名称。所以也许可以解决这个问题并重新设计它。链接到 ngx 日期选择器的 src 代码 github.com/valor-software/ngx-bootstrap/tree/development/src/…
用 igx-calendar 解决了

标签： html twitter-bootstrap datepicker bootstrap-4 ngx-bootstrap

【解决方案1】：

您实际上可以在使用 bdDatepicker 指令的元素中提供placement。只需将此 placement 属性设置为 left 值。这是文档中的示例。 https://valor-software.com/ngx-bootstrap/#/datepicker#placement

【讨论】：