Click here to Skip to main content
15,885,936 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I am creating dynamic UI/form using ngx-formly/bootstrap(not using material). I want to display datepicker control so I have displyed custon bsdatepicker control using ngx-bootstrap/datepicker. But label is not displaying when I give it to in templateOptions
I tried following way.

What I have tried:

1. Create a component which contains html for date picker

<pre>import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
       //datepicker.component.html
       <input type="text" 
       id="dob-id" 
       class="form-control calendar" 
       placement="bottom" 
       bsDatepicker
       [formlyAttributes]="field"
       #dobDate="bsDatepicker" 
       [bsConfig]="bsConfig" 
       placeholder="YYYY-MM-DD"
       [class.is-invalid]="showError" class=""  style="width: 350px;">

       //datepicker.component.ts
       import { Component, OnInit } from '@angular/core';
       import { FieldType } from '@ngx-formly/core';
       import { BsDatepickerConfig } from 'ngx-bootstrap';

       @Component({
       selector: 'app-datepicker',
       templateUrl: './datepicker.component.html',
      styleUrls: ['./datepicker.component.scss']
      })

      export class CustomDatepickerComponent extends FieldType {
     // Optional: only if you want to rely on `MatInput` implementation
     bsConfig: Partial<BsDatepickerConfig> = {
     : 'YYYY-MM-DD',
     showWeekNumbers: false,
     containerClass: 'theme-dark-blue'    
     };
     }


In app.module I have registered that component and in in component where I have defined schema,

{
key: 'date1',
type: 'bsdatepicker',
templateOptions: {
label :'From Date',
required: true
},
expressionProperties: {
//'templateOptions.label': 'From Date'
}
},
Posted
Updated 18-Mar-20 6:56am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900