Angular 6和Bootstrap 4:日期选择器

问题描述

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

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.

这就是我所拥有的.

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>

这将显示以下结果:一个错误

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

Instead of that input with date picker , I just want the full calender to be display on the left side ,

这就是我想要的. 好人

我在线尝试了许多解决方案，但无法解决我的问题，

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

推荐答案

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

You can actually provide placement in the element which uses bdDatepicker directive.Just set this placement property to left value.Here is example in documentation.https://valor-software.com/ngx-bootstrap/#/datepicker#placement

这篇关于Angular 6和Bootstrap 4:日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！