Question

我是角色4的初学者，我正试图在网站上实施bootstrap 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>

我尝试使用事件（clic）或（blur）来使用getDate（#date.value）访问我的输入值，但没有正常工作。这是我的getDate方法，它在浏览器控制台中返回未定义的值。

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

所以我的两个问题是：

如何获取输入的值以将其保存在我的.ts
我可以使用什么功能来检测我在datepicker菜单中选择日期并在菜单关闭时保存该值

希望你能帮助我，抱歉我的英语不好！

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对象。在此示例中，我将在datepicker的dateSelect事件中设置所选日期的值，同时在声明为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

您可以使用 ngx-mydatepicker enter link description here

在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（）函数。

试图获取ngbdatepicker输入值

3 个答案: