ejDatePicker doesn't work in custom control

[jnord]

When we bind the datepicker control in the form it runs fine.

But when we bind the datepicker Control in a custom control and bind this custom Control in a form it doesn't work.

For a test we have bind the datepicker control from ng-bootstrap in same custom control and this works.

What is wrong? Why it doesn't work with ejDatePicker?

[Francis Paul Antony Raj]

HI Jürgen, 

 

Thanks for contacting Syncfusion Support.  

 

As per your requirement, we have prepared a simple sample to bind the DatePicker with custom control in Form. Please find the sample in the below link: 

http://www.syncfusion.com/downloads/support/forum/129645/ze/angular2-seeds-systemjs233930377  

 

Unzip the application and navigate to the root directory through command prompt and execute the below command to run the application.  

Ø  npm install 

Ø  npm start 

 

Navigate to the page http://localhost:3000/#/datepicker    

 

Code Example: 

[app.modeule.ts] 

import { EJAngular2Module } from 'ej-angular2'; 

 

import { DatePickerComponent } from './datepicker/datepicker.component'; 

import { PickerComponent } from './app.picker'; 

 

@NgModule({ 

  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, EJAngular2Module.forRoot(), RouterModule.forRoot(rootRouterConfig, { useHash: true })], 

  declarations: [AppComponent, HomeComponent, DatePickerComponent, PickerComponent], 

  bootstrap: [AppComponent] 

}) 

 

 

[app.picker.ts] 

import { Component, ViewEncapsulation, Input, forwardRef } from '@angular/core'; 

import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 

const noop = () => {}; 

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { 

    provide: NG_VALUE_ACCESSOR, 

    useExisting: forwardRef(() => PickerComponent), 

    multi: true 

}; 

 

@Component({ 

    selector: 'picker', 

    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], 

    template: `<div class='form-group'><ng-content></ng-content><input ej-datepicker [showOtherMonths] = 'showOtherMonths' [showRoundedCorner] = 'showRoundedCorner' [(ngModel)]='value' /> </div>` 

}) 

export class PickerComponent { 

    @Input() showRoundedCorner; 

    @Input() showOtherMonths; 

    private innerValue: any = ''; //The internal data model 

    private onTouchedCallback: () => void = noop; 

    private onChangeCallback: (_: any) => void = noop; 

    get value(): any { return this.innerValue; }; //get accessor 

    set value(v: any) { //set accessor including call the onchange callback 

        if (v !== this.innerValue) { 

            this.innerValue = v; 

            this.onChangeCallback(v); 

        } 

    }     

    onBlur() { this.onTouchedCallback(); } //Set touched on blur 

    writeValue(value: any) { if (value !== this.innerValue) { this.innerValue = value; } }//From ControlValueAccessor interface 

    registerOnChange(fn: any) { this.onChangeCallback = fn; } //From ControlValueAccessor interface 

    registerOnTouched(fn: any) { this.onTouchedCallback = fn; } //From ControlValueAccessor interface 

 

} 

 

[app.component.html] 

<form [formGroup]="registerForm"> 

<input type="text" ej-datepicker formControlName= "date" [enableStrictMode]= "false" [dateFormat]= "dateFormat1"/> 

<p *ngIf="registerForm.controls.date.errors">This field is required!</p> 

 

<picker [showOtherMonths]="false" formControlName= "date1" ></picker> 

<p *ngIf="registerForm.controls.date1.errors">This field is required!</p>  

Two Way binding Value: {{registerForm.controls.date1.value}} 

</form> 

 

[app.component.ts] 

export class DatePickerComponent implements OnInit {  

    registerForm: FormGroup;  

    dateFormat1: string; 

    constructor(private formBuilder: FormBuilder) { 

        this.dateFormat1 = "dd/MMM/yyyy"; 

       }  

    ngOnInit() {  

        this.registerForm = this.formBuilder.group({              

            date: ['', Validators.required], 

            date1: ['', Validators.required]  

        });  

    }  

}  

 

 

Reference Blog: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html  

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Francis Paul A.