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.
Unfortunately, activation email could not send to your email. Please try again.

ejDatePicker doesn't work in custom control

Thread ID:

Created:

Updated:

Platform:

Replies:

129645 Mar 27,2017 08:51 AM Mar 29,2017 12:26 PM Angular 1
loading
Tags: ejDatePicker
j.nord
Asked On March 27, 2017 08:51 AM

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 12:26 PM

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. 


CONFIRMATION

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.

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.

;