Получить необработанный текст вместо объекта даты из поля ввода

Question

У меня есть поле ввода, как показано ниже html code.

   <div class="input-group input-group-md">
    <input id="date"    
        name="date"
        [readOnly]="disabled"
        type="text"
        placeholder="M0/d0/0000 Hh:m0:s0"
        [placeholder]="placeholderSet"
        class="form-control"
        data-toggle="tooltip" 
        title="{{tooltipSet}}"
        (focus)="changePlaceholderOnFocus()"
        (focusout)="changePlaceholderOffFocus()"
        [(ngModel)]="searchInput"
        (input)="setSelectedDate()"
        [owlDateTime]="dt"
        >
        <div class="input-group-append">
            <span class="fa fa-calendar input-group-text"
                    [owlDateTimeTrigger]="dt">
            </span>
        </div>
    </div>
<owl-date-time
        [disabled]="disabled"
        [startAt]=""
        [showSecondsTimer]="true"
        #dt>
</owl-date-time>

Я хочу, чтобы в поле ввода был введен необработанный текст, т. Е. При вводе даты, например 12/12/2020 12: 13: 56 в поле ввода, я получаю дату как Сб De c 12 2020 12:13:56 GMT + 0530 (Стандартное время Индии) в коде вместо мм / дд / гггг чч: мм: сс формат, который я ввел в поле ввода. Я хочу получить данные из поля ввода, дата это или нет. Я ИСПОЛЬЗУЮ OwlDateTime PICKER.

Ниже приведен код ts.

export class DateTimePickerComponent implements OnInit, OnDestroy {

  @Input() disabled: any;
  @Input() placeholderSet: any;
  @Input() tooltipSet: any;
  @Input() selectedDropDown: any;
  @Input()
  parentSubject: Subject<any>;
  searchInput: string;
  temp: any;

  constructor() {
  }

  @Output() selectedDate = new EventEmitter<any>();

  setSelectedDate() {
    this.searchInput = String(this.searchInput);
    this.selectedDate.emit(this.searchInput);
  }

Вы можете видеть, что searchInput является строкой. Вы также можете проверить на прилагаемом снимке экрана, что он преобразует его в правильный js формат даты.

Answer 1

Я использовал ElementRef, чтобы исправить эту проблему. Проверьте ниже обновленный HTML и код TS. HTML Код:

    <input
            #dateTimeInput
            id="date"
            name="date"
            type="text"
            class="form-control"
            data-toggle="tooltip"
            title="{{tooltipSet}}"
            [readOnly]="disabled"
            [placeholder]="placeholderSet"
            [(ngModel)]="searchInput"
            (focus)="changePlaceholderOnFocus()"
            (focusout)="changePlaceholderOffFocus()"
            (dateTimeInput)="setSelectedDate()"
            [owlDateTime]="dt"
    >

Код TS:

export class DateTimePickerComponent implements OnInit, OnDestroy {
  @ViewChild('dateTimeInput') dateTimeInput: ElementRef;
  @Input() disabled: any;
  @Input() placeholderSet: any;
  @Input() tooltipSet: any;
  @Input() selectedDropDown: any;
  @Input()
  parentSubject: Subject<any>;
  searchInput: Date;
  temp: any;

  constructor(private renderer: Renderer2) {
        this.searchInput= null;
    }

  @Output() selectedDate = new EventEmitter<any>();

  setSelectedDate() {
    this.selectedDate.emit(this.dateTimeInput.nativeElement.value);
  }