Angular 7 Persian Calendar Bootstrap UI 在 FormControl 中变形

Question

我有 Angular 7 项目，我使用 ng2-jalali-date-picker 以波斯格式显示日期 从Here 安装日期选择器 我的用户界面代码是

 <div class="panel panel-info">
        <div class="panel-heading">ثبت کاربر جدید</div>
        <div class="panel-body">
            <form name="form" (ngSubmit)="registerForm.form.valid && onSubmit()" #registerForm="ngForm" > 
                <div class="form-group">
                    <label for="username">نام  :  </label>
                    <input type="text" class="form-control" pattern="^[\u0600-\u06FF\s]+$" name="username" [(ngModel)]="User.Name" #username="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && username.invalid }" required />
                    <div *ngIf="registerForm.submitted && username.invalid" class="invalid-feedback">
                        <div *ngIf="username.errors.required">لطفا نام را وارد نمائید</div>
                    </div>
                    <div *ngIf="registerForm.submitted && username.invalid" class="invalid-feedback">
                        <div *ngIf="username.errors.pattern">نام وارد شده باید به صورت فارسی باشد</div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="userbirthdate">تاریخ تولد  :  </label>
                    <dp-date-picker 
                     dir="rtl"
                     [(ngModel)]="dateObject"
                     class="form-control" name="userbirthdate" [(ngModel)]="User.Birthdate" #userbirthdate="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && userbirthdate.invalid }" required 
                     mode="day"
                     placeholder="تاریخ"
                     theme="dp-material">
                </dp-date-picker>
                    <div *ngIf="registerForm.submitted && userbirthdate.invalid" class="invalid-feedback">
                        <div *ngIf="userbirthdate.errors.required">لطفا تاریخ تولد  را وارد نمائید</div>
                    </div>
                </div>
                <button type="submit" class="btn btn-success"   [disabled]="disableSubmitedButton">ثبت </button>
              </form>       
        </div>
        </div>

这部分

<dp-date-picker 
                     dir="rtl"
                     [(ngModel)]="dateObject"
                     class="form-control" name="userbirthdate" [(ngModel)]="User.Birthdate" #userbirthdate="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && userbirthdate.invalid }" required 
                     mode="day"
                     placeholder="تاریخ"
                     theme="dp-material">
                </dp-date-picker>

将日期选择器添加到表单 日期选择器工作正常但显示变形 form image

Answer 1

dp-date-picker 重新生成类并在组件生成后删除您的类。

试试这个：

    <dp-date-picker [(ngModel)]="fromDate" name="fromDate" mode="day"
         theme="dp-material form-control" id="fromDate">
    </dp-date-picker>

我将form-control 类添加到theme 属性。

那么你应该改变css样式：试试这个：

    dp-date-picker  {
      padding: 0px !important;
    }

    .dp-popup{
        padding: 0px !important;
    }

    dp-month-calendar{
        padding: 0px !important;
        border:none !important;
    }

    dp-day-calendar{
        padding: 0px !important;
        border:none !important;
    }

    dp-calendar-nav{
        border:none !important;
    }

    .dp-calendar-nav-container{
        border:none !important;
    }

    .dp-input-container > .dp-picker-input {
      background-color: transparent !important;
      border: none !important;
      box-shadow: none;
      -webkit-box-shadow: none;
      display: block;
      width: 100%;
      height: 34px !important;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-image: none;
      border-radius: 4px;
      -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
      -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }