Question

我在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); 

下面是代碼plunker：https://plnkr.co/edit/iLAFa8yrCLeTcd27G8bY?p=preview

能否請你幫忙嗎？

Answer 1

更新

也許你要編寫自定義指令將實現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; 
    } 
} 

Plunker Example

產地

我認爲你可以做到這一點通過使用工作如下：

$(selector-ng-datepicker).datepicker({ 
    changeMonth: true, 
    yearRange: "1:100", 
    changeYear: true 
}).on('change', e => this.dateSelected = e.target.value); 

Updated Plunker