Формат Дата Месяц только

Question

Я хочу форматировать дату только в течение месяца. На данный момент, когда я отправляю дату, console.log отображает вот так

Я хочу изменить вот так {month:"april", search: "test"}

это мой демо-код stackblitz

HTML

<form class="form-group" [formGroup]="form2" (ngSubmit)="onSubmit(form2.value)">

        <div class="form-group">
            <label>Date:</label>
            <input  [(ngModel)]="month" formControlName="month"  autocomplete="off" class="form-control" name="date" bsDatepicker [bsConfig]="{dateInputFormat: 'MMMM'}" (onShown)="onOpenCalendar($event)" placeholder="Calendar">
        </div>

        <div class="form-group">
            <label>Search</label>
        <input type="text" class="form-control" (keyup.enter)="onSubmit(form2.value)" formControlName="search"  placeholder="Search..">
        </div>

    </form>

Компонент

form2: FormGroup;

    constructor(private fb: FormBuilder) {
    this.form2 = new FormGroup({
      month: new FormControl(''),
      search: new FormControl('')
    });
  }
  onSubmit(form2) {
    console.log(this.form2.value)
  }

Answer 1

измените вашу onSubmit функцию, как показано ниже:

onSubmit(form2) {
  console.log(
      {
        month:new Date(this.form2.value.month).toLocaleString('en-us',{month:'long'}),
        search:this.form2.value.search
      }
    ); // Output: {month: "February", search: "16"}
}

---

date.toLocaleString () является встроенной функцией в JavaScript, которая используется для преобразования даты и времени в строку .

long использует полное имя месяца, short для короткого имени.

Вы можете получить year и date, как показано ниже:

date.toLocaleString('en-us',{month:'long', year:'numeric', day:'numeric'})

Answer 2

Используйте это при отправке формы

  onSubmit(form2) {this.form2.value.month = this.datepipe.transform(this.form2.value.month, 'MMMM')
console.log(this.form2.value)}

Answer 3

Вам просто нужно найти индекс месяца и затем сопоставить его с соответствующим названием месяца.

Вот обновленный код. https://stackblitz.com/edit/ngx-datepicker-month-picker-poc-jgsnk8

В вашей onSubmit (form2)

onSubmit(form2) {
    var monthNames = ["January", "February", "March", "April", "May","June","July", "August", "September", "October", "November","December"];
    const date = new Date(this.form2.value.month);
    // get the month number 0-11
    const monthIndex = date.getMonth();
    // get the name for the month number
    const monthName = monthNames[monthIndex]
    console.log({ month: monthName, search: this.form2.value.search });
  }

Answer 4

Я сделал небольшое обновление во фрагменте кода, которым вы поделились.

  onSubmit(form2) {
    let formData = {...this.form2.value, 'month': this.modelDate}
    console.log(formData)
  }

  onOpenCalendar(container) {
    container.monthSelectHandler = (event: any): void => {
      console.log(event)
      this.modelDate = event.label
      container._store.dispatch(container._actions.select(event.date));
    };     
    container.setViewMode('month');
  }

Answer 5

Пожалуйста, попробуйте вот так. Мы держим карту с номером месяца и соответствующим месяцем. Чтобы получить строку месяца, мы можем использовать эту карту.

 onSubmit(form2) {
        let monthMap = new Map()
        monthMap.set(0 , "January")
        monthMap.set(1 , "February")
        monthMap.set(2 , "March")
        monthMap.set(3 , "April")
        monthMap.set(4 , "May")
        monthMap.set(5 , "June")
        monthMap.set(6 , "July")
        monthMap.set(7 , "August")
        monthMap.set(8 , "September")
        monthMap.set(9 , "October")
        monthMap.set(10 , "November")
        monthMap.set(11 , "December")
        const data = this.form2.value;
        data.month = monthMap.get(new Date(data.month).getMonth())
        console.log(data)
      }