Преобразование времени в 24-часовой формат и получение значений с помощью formControlName и заполнение значений, angular

Question

1. У меня есть два раскрывающихся списка времени начала и окончания, как преобразовать его в 24-часовой формат, чтобы он отображался в консоли как 07: 00..15: 00 и c., Когда выбрано .

Шаблон

 Start at:
        <select (change)="onSelect($event.target.value)"   id="skill">
         <option value="0" selected>Select</option>
          <option  [value]="i" *ngFor="let type of startTimeArray; let i = index">
            {{type}}
          </option>
       </select>
       End at:
      <select *ngIf="enableEndTime" id="exp">
         <option value="0" selected>Select</option>
          <option [value]="type" *ngFor="let type of tempEndTimeArray">
            {{type}}
          </option>
      </select>

TS

  import { Component } from "@angular/core";
import { FormGroup, FormArray, FormBuilder, FormControl } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  forTableArray: any = [];
 startTimeArray:any=["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",  "1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];
  endTimeArray:any=["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",  "1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];
  public tempEndTimeArray: Array<any>;
  public enableEndTime: boolean = true;

public onSelect(val){
  console.log(val)
  let index = parseInt(val) + 1;
  console.log(index)
   this.tempEndTimeArray = this.endTimeArray.slice(index);

}
  convertTime12to24(time12h) {
    const [time, modifier] = time12h.split(" ");
    let [hours, minutes] = time.split(":");
    if (hours === "12") {
      hours = "00";
    }
    if (modifier === "PM") {
      hours = parseInt(hours, 10) + 12;
    }
    return `${hours}:${minutes}`;
  }
}

здесь я использовал функцию convertTime12to24, но я не могу отправить ей выбранное значение опции .

также если я установлю дату начала как, скажем, 1PM и дату окончания как 1PM по умолчанию (из TS), то она должна отражаться соответственно в дате начала и дате окончания, а если дата окончания - 7PM, то дата окончания массив должен быть между 2 вечера до 7 вечера. то есть я не могу правильно заполнить поля

Я хочу, чтобы мои выпадающие списки работали этими двумя способами, когда нет значения по умолчанию и когда значение по умолчанию установлено

https://stackblitz.com/edit/angular-r2sv3k

Answer 1

**

ОБНОВЛЕННЫЙ ОТВЕТ

**

Вот StackBlitz, который теперь полностью решает ваши проблемы. https://stackblitz.com/edit/pm-am-time-conversion

Ниже я вставил весь код, но вы можете найти мои комментарии. В итоге я реализовал реактивную форму, чтобы я мог сделать вещи работоспособными. В редактируемом случае вы, очевидно, будете получать данные с какого-либо сервера, но для того, чтобы воспроизвести их, я только что сделал это, чтобы смоделировать: я взял даты как свойство класса и в методе ngOnInit let {startDate, endDate} = this.dates ; а затем установите элементы управления формы для заполнения раскрывающихся списков.

В файле TypeScript вы увидите, что я использую два обобщенных c метода для преобразования времени:

parseFromAmPmToTwentyFour (): Для времени AM / PM до 24 часов и parseFromTwentyFourToAmPm (): Для времени 24 часа до AM / PM

Общий метод c для обработки как даты начала, так и даты окончания, onSelect (): Для настройки startDate и endDate в свойствах класса раскрывающегося списка и отслеживания

HTML

<h2>{{ title }}</h2>

<form [formGroup]="dateTrackForm">
  Start at:
  <select 
    formControlName="startDate"
    (change)="onSelect($event.target.value, 'startDate')" 
    id="skill">
    <option value="0" selected>Select</option>
    <option [value]="type" *ngFor="let type of startTimeArray; let i = index">
      {{type}}
    </option>
  </select>

  End at:
  <select 
    formControlName="endDate"
    (change)="onSelect($event.target.value, 'endDate')">
    <option value="0" selected>Select</option>
    <option [value]="type" *ngFor="let type of endTimeArray">
      {{type}}
    </option>
  </select>
</form>

TypeScript

export class AppComponent implements OnInit {
  public title = "Nested FormArray Example Add Form Fields Dynamically";
  public startTimeArray: string[] = [
    "7:00 AM", "8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM", "7:00 PM", "8:00 PM",
  ];
  public endTimeArray: string[] = [
    "7:00 AM", "8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM", "7:00 PM", "8:00 PM",
  ];
  public dates = {
    startDate: '08:00',
    endDate: '13:00',
  }

  // form name
  public dateTrackForm: FormGroup;

  // keeping track from startDate and endDate
  public startDate: string;
  public endDate: string;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit(): void {
    // response from some api, you obviously have to do some work
    let { startDate, endDate } = this.dates;
    this.dateTrackForm = this.fb.group({
      startDate: this.fb.control(''),
      endDate: this.fb.control('')
    });

    if (startDate) {
      this.startDate = startDate;
      this.dateTrackForm.get('startDate').patchValue(this.parseFromTwentyFourToAmPm(startDate));
    }
    if (endDate) {
      this.endDate = endDate;
      this.dateTrackForm.get('endDate').patchValue(this.parseFromTwentyFourToAmPm(endDate));
    }
  }

  // we will using same method for both the case and will identify start or end dates based on the second prameter for which I have defined an enum at the end of the file
  public onSelect(time: string, date: Dates): void {
    if (date === Dates.START_DATE) {
      this.startDate = this.parseFromAmPmToTwentyFour(time);
    } else if (date === Dates.END_DATE) {
      this.endDate = this.parseFromAmPmToTwentyFour(time);
    }

    // 24 hours time that you want already assigned to respective field and now you can simple do what you want with it.
  }

  // This method will parse the time from am/pm time to 24 hours time
  public parseFromAmPmToTwentyFour(time: string): string {
    let hours = Number(time.match(/^(\d+)/)[1]);
    const minutes = Number(time.match(/:(\d+)/)[1]);
    const AMPM = time.match(/\s(.*)$/)[1];
    if (AMPM == "PM" && hours < 12) hours = hours + 12;
    if (AMPM == "AM" && hours == 12) hours = hours - 12;
    let sHours = hours.toString();
    let sMinutes = minutes.toString();
    if (hours < 10) sHours = "0" + sHours;
    if (minutes < 10) sMinutes = "0" + sMinutes;
    return `${sHours} : ${sMinutes}`;
  }

  // This method will parse the time from 24 hours time to am/pm time
  public parseFromTwentyFourToAmPm(time: string): string {
    const H = +time.substr(0, 2);
    const h = H % 12 || 12;
    const ampm = (H < 12 || H === 24) ? "AM" : "PM";
    time = h + time.substr(2, 3) + ' ' + ampm;
    return time;
  }
}

// enum for detecting start or end date
enum Dates {
  START_DATE = "startDate",
  END_DATE = "endDate",
}

Вот StackBlitz, который теперь полностью решает ваши проблемы. https://stackblitz.com/edit/pm-am-time-conversion

Источник для AM: преобразование PM в 24 часа: преобразование 12-часового чч: мм AM / PM в 24-часовой чч: мм

Источник для 24 часов в AM: преобразование PM: Javascript: преобразование строки времени суток в 12 часов в AM / PM без часового пояса

Существующие решения, которые я использовал, одинаковы, и я внес некоторые изменения.

Одна вещь, которую я хотел бы упомянуть, это то, что вы только что объявили вещи, и было много недостающих реализаций, таких как Reactive Form был только объявлен, но не использовался. Чтобы предоставить вам решение, я должен также добавить недостающие реализации. Пожалуйста, прежде чем задавать такие вопросы, попробуйте добавить все, что вы можете.

Спасибо @ Hereti c Обезьяне за совет по обновлению ответа.