Angular 7 Персидский каландр Bootstrap UI, деформированный в FormControl

Question

У меня есть проект Angular 7, и я использовал средство выбора даты ng2-jalali Для отображения даты в персидском формате. Выбор даты установки из Здесь Мой код пользовательского интерфейса

 <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>

Добавить средство выбора даты в форму.

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;
    }