[英]Bootstrap pop-up calendar in Angular 4
I am using Bootstrap pop-up calendar that I can choose different date. 我正在使用Bootstrap弹出日历,可以选择其他日期。 I would like to import specific data when I click a certain date.. I already have the table where I can import data, and I just want the entries to be updated with different date chosen. 当我单击某个日期时,我想导入特定的数据。.我已经有了可以导入数据的表,我只想使用选择的不同日期来更新条目。
How should I approach this? 我应该如何处理?
calendar 日历
<span>
<form class="form-inline">
<button (click)="myEvent($event)">Test</button>
<span style='margin-right:1.25em; display:inline-block;'> </span>
<div class="form-group">
<div class="input-group">
<input class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[(ngModel)]="model"
ngbDatepicker
#d="ngbDatepicker">
<button class="input-group-addon"
(click)="d.toggle()"
type="button">
<img src="img/calendar-icon.svg" style="width: 0.5rem; height: 0.5rem; cursor: pointer;"/>
</button>
</div>
</div>
</form>
</span>
If I got correctly your problem is you are trying to fetch some data (trigger some action) once the date selected is certain date. 如果我没错,那么您的问题是,一旦选择的日期是某个日期,您就试图获取一些数据(触发某些操作)。 Am I right? 我对吗?
If that's the case, all you need to do is to control the event triggered when the model of the input date changes, how can you do that? 在这种情况下,您需要做的就是控制在输入日期的模型发生更改时触发的事件,该怎么办? with ngModel & ngModelChange. 使用ngModel和ngModelChange。
Sample: 样品:
input class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[ngModel]="model"
(ngModelChange)="onChange($event)"
ngbDatepicker
#d="ngbDatepicker">
And then in the typescript file, create a method to handle every time the model gets updated: 然后在打字稿文件中,创建一个方法,以在每次模型更新时进行处理:
onChange(date) {
this.model = date; // This is what [()] banana box does automatically
checkIfDateIsWhatIAmExpecting(date) // call the method to check if is the date and if so, load/fetch/do whatever you need
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.