gpt4 book ai didi

angular - 试图获取 ngbdatepicker 输入值

转载 作者:太空狗 更新时间:2023-10-29 18:23:43 26 4
gpt4 key购买 nike

我是 angular 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 中
  • 我可以使用什么函数来检测我在日期选择器菜单中选择了一个日期并在菜单关闭时保存该值

希望你能帮助我,抱歉我的英语不好!

最佳答案

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

关于angular - 试图获取 ngbdatepicker 输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50017719/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com