[英]AngularJS 2 input field does not update ngModel for Jquery Date Picker date change
我在angularjs 2组件中遇到了Jquery UI datepicker的问题。
它显示从日期日历更改的日期,但不更新基础ngModel:dateSelected。
dateSelected: string = '';
这里的日期选择器输入为:
<input type="text" class="form-control" [(ngModel)]="dateSelected" name='datepicker1' id='datepicker1' placeholder="Select a date"/>
我正在尝试将this.dateSelected模型中的选定日期设置为不起作用的第二个日期选择器。
$("#datepicker2").val(this.dateSelected);
另一方面,如果我通过jQuery val方式读取选定的日期,则效果很好。
var selectedDateInPicker = $("#datepicker1").val();
$("#datepicker2").val(selectedDateInPicker);
这是代码插件: https ://plnkr.co/edit/iLAFa8yrCLeTcd27G8bY ? p = preview
你能帮忙吗?
更新资料
也许您想编写将实现ControlValueAccessor
自定义指令:
declare var $: any;
@Directive({
selector: '[datepicker]',
providers: [{
provide: NG_VALUE_ACCESSOR,useExisting:
forwardRef(() => DatePickerDirective),
multi: true
}]
})
export class DatePickerDirective implements ControlValueAccessor {
value: string;
constructor(protected el: ElementRef) {}
ngAfterViewInit(){
$(this.el.nativeElement).datepicker({
changeMonth: true,
yearRange: "1:100", // you can pass it as @Input options
changeYear: true
}).on('change', e => this.onModelChange(e.target.value));
}
onModelChange: Function = () => {};
onModelTouched: Function = () => {};
writeValue(val: string) : void {
this.value = val;
}
registerOnChange(fn: Function): void {
this.onModelChange = fn;
}
registerOnTouched(fn: Function): void {
this.onModelTouched = fn;
}
}
起源
我认为您可以使用以下方法来做到这一点:
$(selector-ng-datepicker).datepicker({
changeMonth: true,
yearRange: "1:100",
changeYear: true
}).on('change', e => this.dateSelected = e.target.value);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.