twitter-bootstrap Angular 6 和 bootstrap 4：日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51191162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 and bootstrap 4: date picker
提问by The Dead Man
I have a form which contain a date picker / calender, email, city name and hotel name, I want a user to select a date and enter other fields and submit the data.
我有一个包含日期选择器/日历、电子邮件、城市名称和酒店名称的表单，我希望用户选择一个日期并输入其他字段并提交数据。
This is what I have.
这就是我所拥有的。
HTML:
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>
This dispalys the following result: wrong one
这显示以下结果：错误的一个
Instead of that input with date picker , I just want the full calender to be display on the left side ,
而不是日期选择器的输入，我只想在左侧显示完整的日历，
Here is what I want . Good one
这是我想要的。不错的
I tried many solution online I could not be able to solve my problem,
我在网上尝试了很多解决方案都无法解决我的问题，
What do I need to change in my code to get the result I want? please Am newbie though, thanks
我需要在代码中更改什么才能获得我想要的结果？请尽管是新手，谢谢
回答by Joklogh
You can actually provide placementin the element which uses bdDatepicker directive.
Just set this placementproperty to leftvalue.
Here is example in documentation.
https://valor-software.com/ngx-bootstrap/#/datepicker#placement
您实际上可以placement在使用 bdDatepicker 指令的元素中提供。只需将此placement属性设置为left值即可。这是文档中的示例。
https://valor-software.com/ngx-bootstrap/#/datepicker#placement
