Change background color of the text input and also set tooltip

[Sam Tran]

Hi,

I can't find the proper CSS tag or property to do the following:

1. Set only the background of the date input of datepicker

2. Set a tooltip on only the date input of datepicker

If you look at the attachment, I only want to change the area highlighted in yellow.

I'm using Aurelia.

Thanks as always!!!!!

Attachment: ejdatepicker_960d51cd.rar

[Sureshkumar P]

Hi Sam,   

   

Thank you for contacting Syncfusion Support.   

   

We can customize our ejDatePicker by using our existing cssClass property. please refer to the below code-block 

[sample.html] 

<input id="datepick" ej-date-picker="e-value.two-way:dateValue;e-css-class:e-custom-css" mouseover.delegate="domouseover()"></input> 

    <style> 

//override the datepicker input element’s background color 

        .e-custom-css.e-datewidget input { 

            background: #fbff15; 

        } 

    </style> 

 

[sample.js] 

constructor(){ 

    this.dateValue = new Date(); 

    } 

    domouseover(){ 

        //created the datepicker instance to set the title attribute 

        let datePickerInstance =$('#datepick').ejDatePicker('instance'); 

        datePickerInstance.element.attr("title",this.dateValue); 

    } 

In this above code-block, we have achieved your requirement by using our existing cssClass property and override the datepicker input elements background color by using e-custom-css class.   

   

For your convenience, we have prepared a sample based on your requirement. Please find the sample in below link: http://www.syncfusion.com/downloads/support/forum/136633/ze/skeleton-esnext-1750074828   

 

Sample running procedure: 

1.      Unzipped attached sample  

2.      Execute ‘npm install’ command  

3.      And execute ‘jspm install command  

4.      And run the sample by execute ‘gulp watch’ command. 

 

Regards, 

Sureshkumar P 

[Sam Tran]

Hi,

Thank you for your help!

This works, but the css is also changing the entire pop up calendar background.

(see screenshot)

Is there a css tag that will change only the input?

Attachment: date_bg_4ea6eb13.rar

[Thirukumaran Murugan]

Hi Sam, 

 

Thanks for contacting Syncfusion support. 

 

We would like to inform you that the “cssClass” property will add the given CSS class(“e-custom-css”) to both the input wrapper and to the Datepicker popup element. If you want to customize only the  

Input element. you need to specify the CSS selector as like below. It customizes (adds yellow background) only the input element not the Datepicker popup. Please find the below code blocks 

 

 

Input element related styling: 

 

// CSS selector adds yellow background to the input element.   

.e-datewidget.e-custom-css input { 

            background: #fbff15; 

        } 

 

 

 

Regards, 

Thirukumaran M.