Попытка получить входное значение ngbdatepicker - PullRequest
Новая
       7

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

0 голосов
/ 25 апреля 2018

Я новичок в 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
  • Какую функцию я могу использовать, чтобы определить, что я выбираю дату в меню средства выбора даты и сохранить значение при закрытии меню

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

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

вы можете использовать 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

0 голосов
/ 25 апреля 2018

Вы можете использовать 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 ().

0 голосов
/ 25 апреля 2018

Вы можете использовать (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

...