Попытка получить входное значение ngbdatepicker

Question

Я новичок в Angular 4, и я пытаюсь реализовать загрузчик ngbdatepicker на веб-сайте.

Вот мой HTML-код:

<div class="input-group ">
    <input id="datepicker" class="form-control col-7" placeholder="{{dateWording}}" ngbDatepicker #date="ngbDatepicker" required pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary picto-calender" (click)="date.toggle()" type="button"></button>
    </div>
</div>

Я пытался использовать события как (щелчки) или (размытие) для доступа к своему входному значению с помощью getDate(#date.value), но ничего не работало должным образом. Вот мой метод getDate, который возвращает неопределенное значение в консоли браузера.

getDate(date: any) {
    this.date = date;
    console.log(this.date);
}

Итак, мои два вопроса:

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

Надеюсь, вы поможете мне и извините за мой плохой английский!

Answer 1

Вы можете использовать (ngModelChange), чтобы получить значение даты. Я изменил ваш код, проверьте это

<div class="input-group ">
    <input id="datepicker" class="form-control col-7" [(ngModel)]="model" 
     placeholder="" ngbDatepicker #date="ngbDatepicker" required 
  (ngModelChange)="select(model)" pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}">
   <div class="input-group-append">
       <button class="btn btn-outline-secondary picto-calender" 
  (click)="date.toggle()" type="button"></button>
     </div>

и ваш component.ts должен понравиться

   select(model){  
      console.log(model);
    }

Рабочий пример:

https://stackblitz.com/edit/angular-xnv11x?file=app/datepicker-popup.ts

Answer 2

Ты можешь использовать ngModel сохранить выбранную дату в объекте типа NgbDateStruct, он содержит три свойства month,year and day, Тогда вы можете создать Date объект от этого. В этом примере я устанавливаю значение выбранной даты в dateSelect событие DatePicker, также значение устанавливается в объекте, объявленном как ngModel,

HTML

<div class="input-group ">
    <input id="datepicker" class="form-control col-7" placeholder="{{dateWording}}" ngbDatepicker #date="ngbDatepicker" required pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}" [(ngModel)]="currentDateObj" name="date" (dateSelect) = "onSelect($event)">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary picto-calender" (click)="date.toggle()" type="button"></button>
    </div>
</div> 

код файла ts

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  public model:any = {};
  public selectedDate:Date;
  public dateWording:string = "yyyy-mm-dd";
  public currentDateObj:any = {};
  onSelect(evt:any){
    this.selectedDate = new Date(evt.year,evt.month-1,evt.day);
    console.log(this.selectedDate);
  }


}

Рабочая демонстрация: https://stackblitz.com/edit/angular-sskm4x

Answer 3

Используйте (ngModelChange) для получения значения средства выбора даты.

      <input  id="datepicker"
        [(ngModel)]="model" 
        ngbDatepicker
        #date="ngbDatepicker"
        (ngModelChange)="selectDateFunc(model)"
        pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}"
        required />

<button (click)="date.toggle()"
    type="button"></button>

добавьте эту функцию в component.ts

             selectDateFunc( selectedDate ){  
          console.log( selectedDate );
       }

Answer 4

Вы можете использовать ngx-mydatepicker, введите ссылку здесь

В my.component.html добавьте текст ниже

<div class="input-group">
                <input class="form-control" required (click)="dp1.toggleCalendar()" #startDateTime style="float:none" placeholder="Select a date" ngx-mydatepicker name="mydate"
                    [options]="myOptions1" #dp1="ngx-mydatepicker" (dateChanged)="onStartDateChanged($event)" required/>

                <span class="input-group-btn">
                    <button type="button" class="btn btn-default my-picker" (click)="dp1.clearDate()">
                        <i class="glyphicon glyphicon-remove"></i>
                    </button>
                    <button type="button" class="btn btn-default my-picker" (click)="dp1.toggleCalendar()">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
            </div>

В my.component.ts добавьте функцию ниже

onStartDateChanged(e){
// var dd = e.jsdate.setDate(e.jsdate.getDate() - 1);
var ddd = { year: e.jsdate.getFullYear(), month: e.jsdate.getMonth() + 1, day: e.jsdate.getDate()-1}
this.startDate = e.jsdate;
this.myOptions2 = {
  dateFormat: 'dd.mm.yyyy',
  markCurrentDay: true,
  showTodayBtn: true,
  disableUntil: ddd
};
}

При изменении даты вызывается функция onStartDateChanged().