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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejDatePicker doesn't work in custom control

Thread ID:





129645 Mar 27,2017 12:51 PM UTC Mar 29,2017 04:26 PM UTC Angular 1
Tags: ejDatePicker
Asked On March 27, 2017 12:51 PM UTC

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 [Syncfusion]
Replied On 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: 
import { EJAngular2Module } from 'ej-angular2'; 
import { DatePickerComponent } from './datepicker/datepicker.component'; 
import { PickerComponent } from './app.picker'; 
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, EJAngular2Module.forRoot(), RouterModule.forRoot(rootRouterConfig, { useHash: true })], 
  declarations: [AppComponent, HomeComponent, DatePickerComponent, PickerComponent], 
  bootstrap: [AppComponent] 
import { Component, ViewEncapsulation, Input, forwardRef } from '@angular/core'; 
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 
const noop = () => {}; 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => PickerComponent), 
    multi: true 
    selector: 'picker', 
    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; 
    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 
<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}} 
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. 
Francis Paul A. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon