как изменить формат ввода ngx-datepicker

Question

Я хочу получить дату в качестве ввода в гггг-мм-дд, и она показывает тот же формат при выборе даты, но получает ввод в формате 2019-07-08T12: 16: 10.000Z.

         <input
          class="form-control"
          style="width: 48%;display: inline;margin-left: 17px;"
          bsDatepicker
          placeholder="Month And Year"
          [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
          formControlName="month_and_year" >
        </div>

Я получаю этот формат "month_and_year": "2019-07-08T12:16:10.000Z".Я хочу это только в формате "2019-07-08"

Answer 1

Если вы используете ввод, вы можете добавить канал даты к вашему значению.

 <input type="text" class="form-control" bsDatepicker formControlName="date"  
   [(bsValue)]="newVar" value="{{ newVar | date:'yyyy- MM-dd' }}"/>

Answer 2

Вы можете указать формат конфигурации следующим образом:

  [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }

Проверьте документы здесь

UPDATE

Мне кажется, я понимаю вашу проблему. Вы создали реактивную форму, подобную этой:

<form novalidate [formGroup]="myForm">

<input
  class="form-control"
  style="width:48%; display: inline;margin-left: 17px;"
  bsDatepicker
  placeholder="Month And Year"
  [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
  formControlName="month_and_year">

</form>

И вы пытаетесь получить доступ к полю "month_and_year" в вашей форме, например:

<code><pre>myForm: {{ myForm.value | json }}

И вы получите это:

myForm: {
  "month_and_year": "2015-01-30T23:00:00.000Z"
}

Теперь поведение здесь нормальное, поскольку вы работаете с типом Date. Если у вас есть переменная в вашем компоненте и вы инициализируете ее с датой примерно такой:

this.today = new Date();

затем в html вы выводите его с помощью канала json, и вы получите "2019-07-11T08: 04: 38.221Z":

<code><pre>{{ today | json }}

Точно так же, если вы добавите кнопку для обновления вашего "month_and_year" следующим образом:

<button (click)="setFormDateValue()">Set Form Date Value</button>

  setFormDateValue() {
    this.myForm.patchValue({ month_and_year: new Date(2015, 0, 31) });
  }

Вы все еще работаете с типом даты.

Чтобы получить только год, месяц и день. Вы должны вручную извлечь его из поля формы "month_and_year":

<code><pre>{{ getDateInRequiredFormat(myForm.get("month_and_year").value) }}

Реализация может быть примерно такой:

  getDateInRequiredFormat(d: Date): string {
    if (d instanceof Date) {
      let month: string | number = d.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      let day: string | number = d.getDate();
      if (day < 10) {
        day = '0' + day;
      }
      return `${d.getFullYear()}-${month}-${day}`;
    }
    return '';
  }

После выполнения этой функции вы получите выбранную дату в формате ГГГГ-ММ-ДД.

Демонстрация по Stackblitz