html - Angular 6 和 bootstrap 4 : date picker

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

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

这就是我的。

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>

这会显示以下结果:错误的

enter image description here

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

这就是我想要的。 好一个

enter image description here

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

我需要在我的代码中更改什么才能获得我想要的结果?不过我是新手,谢谢

最佳答案

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

关于html - Angular 6 和 bootstrap 4 : date picker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51191162/

相关文章:

html - 如何在导航栏中垂直对齐按钮?

javascript - 如何禁用 JQuery 日期选择器中的特定日期?

vb.net - 如何在 DataGridViewColumn 中使用服务器日期时间格式而不是系统日期时间格式

javascript - 如何在渲染前将文本字段的值设置为jsp中的 session 属性?

javascript - 在 JavaScript 字符串中添加多个断点

javascript - 我们如何获取 extjs 树中选择节点的索引?

jquery - 自动完成问题到 Bootstrap 模式

css - css 中的属性优先级重要吗?

javascript - Bootstrap 导航栏不显示 CSS

php - Yii 中的日期选择器将数据存储为 yy MM d 格式