4

我是 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>

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

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

所以我的两个问题是：

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

希望你能帮助我，对不起我的英语不好！

4

4 回答 4

6

您可以使用（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

于 2018-04-25T09:56:57.063 回答
2

您可以使用ngModel将所选日期存储在类型的对象中NgbDateStruct。它包含三个属性month,year and day。然后你可以从中创建一个Date对象。在此示例中，我在dateSelectdatepicker 事件中设置所选日期的值，该值也在声明为的对象中设置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

于 2018-04-25T10:05:20.857 回答
0

使用 (ngModelChange) 获取 datepicker 值。

<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 );
       }
于 2021-12-29T13:02:52.127 回答
-1

您可以使用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() 函数。

于 2018-04-25T12:24:25.720 回答