We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejDatePicker doesn't work in custom control

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?




1 Reply

FP Francis Paul Antony Raj Syncfusion Team March 29, 2017 04:26 PM UTC

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: 
 
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]  
        });  
    }  
}  
 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Francis Paul A. 


Loader.
Live Chat Icon For mobile
Up arrow icon