Datepicker popup CSS customization

[Dimitrije Prosevski]

I tried all kinds of ways to customize my datepicker popup but it does not work. I am trying to change popup's background color, are these the classes I am supposed to use? 

e-datepicker

e-popup-wrapper

[Sevvandhi Nagulan]

Hi David, 

We checked your query.  In the sample provided, you have incorrectly provided the field name in the filtering event. Also, you can restrict the filtered item result by using the take property in the filtering result. Kindly refer the modified code and sample below. 

onFiltering(e){  

  console.log(e); 

  let pred:Predicate;  

  let subString;  

   let query: Query = new Query();  

   if(e.text.includes(" ") && e.text.charAt(e.text.length-1) != " "){  

      subString = e.text.split(" ");  

      subString.map((value)=> {  

        if(pred)  

            pred =  pred.and("value",'contains',value,true,true);  

        else  

            pred=new Predicate("value",'contains',value,true,true);  

      })  

      query = query.where(pred).take(20);  

   }  

   else {  

    query = (e.text !== '') ? query.where('value', 'contains', e.text, true).take(20) : query;  

   }  

    e.updateData(this.data, query);  

}  

Please find the modified sample below. 

Sample link: https://stackblitz.com/edit/angular-guucqq-ubvurz?file=app.component.ts 

UG documentation: https://ej2.syncfusion.com/angular/documentation/datepicker/customization/ 

 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Dimitrije Prosevski]

You have replied to a wrong person

[Sevvandhi Nagulan]

Hi Dimitrije, 

Sorry for the inconvenience caused. 

We checked your query. We can change the popup’s background color using the below selectors with the help of using cssClass property. Refer the below code. 

[HTML] 

<ejs-datepicker cssClass="e-custom-class"></ejs-datepicker> 

[CSS] 

.e-datepicker.e-popup.e-custom-class .e-calendar { 

    background-color: pink; 

  } 

   

Please find the sample below. 

Sample link: https://stackblitz.com/edit/angular-9lmgbz?file=app.component.css 

UG Link: https://ej2.syncfusion.com/angular/documentation/datepicker/customization/ 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Dimitrije Prosevski]

That did not work...

[Sevvandhi Nagulan]

Hi Dimitrije, 

 

 

We checked your query. The popup’s background color has been changed in the provided sample. Please refer the below screenshot. 

 

 

 

 

Please modify the sample in the last update and send it to us so we can investigate the issue. Also, include more details about the type of customization that needs to be done in the popup. 

 

Regards, 

Sevvandhi N