Change font, font size, background color, color and addition buttons

Question

Hi,I am investigating the blazor date picker.Is possible to change the font, font size, background color, color?Is it possible to add another button (i am planning to use it like  Date.Now + 7 days)Regards

Berly Christopher · Answer

Hi George,

Greetings from Syncfusion support.

Query 1:

Is possible to change the font, font size, background color, color?

Response:

We can customize the font, font-size, background-color and color by overriding the CSS styles through CssClass property as mentioned below.

[index.razor]

<EjsDatePicker TValue="DateTime?" CssClass="customClass"></EjsDatePicker>

<style>

.e-input-group.e-control-wrapper.customClass {

font-size: 20px;

color: #18d245;

background-color: #ffc0cb;

}

</style>

Please find the sample from the below link.

Sample Link: https://www.syncfusion.com/downloads/support/forum/151954/ze/Blazor_Application_EJ2_151954_datepicker-1029661287

To know more about component property and methods, please refer the below link.

UG Link: https://ej2.syncfusion.com/blazor/documentation/datepicker/getting-started/?no-cache=1

API Link: https://help.syncfusion.com/cr/blazor/

Demo Link: https://blazor.syncfusion.com/demos/DatePicker/DefaultFunctionalities/

Query 2:

Is it possible to add another button (i am planning to use it like Date.Now + 7 days)

Response:

We can add another custom button inside the DatePicker popup by manipulate the DatePicker popup element. But we could not manipulate the DOM in the Blazor application. We can do it though using JS interop file and achieve in the open event of the DatePicker.

Regards,

Berly B.C

Iria Cervelló · Answer

Thanks for the answer but how may i change the icon color?

Berly Christopher · Answer

Hi Iria, 

We can change the color of the date icon by overriding the CSS styles as mentioned below.  





  .customClass.e-input-group.e-control-wrapper .e-input-group-icon, 
    .customClass.e-input-group.e-control-wrapper .e-input-group-icon:hover, 
    .customClass.e-input-group.e-control-wrapper .e-input-group-icon:active, 
    .customClass.e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active { 
        color: blue; 
    } 

Please find the sample from below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Application_EJ2-1881015671  
 
Regards, Berly B.C

Stefan Heimbach · Answer

Can u help me to find the css classes for setting the color of Label and underline the same as the changed text color? (attached file)

thank u guys!

EDIT:

.CustomCSS.e-input-group.e-control-wrapper {

border-color: #c3c3c6 !important;

}

did the trick for the underline

I just neet advice for the floating label pls

Attachment: syncfusionHelp_b755b5ca.zip

Berly Christopher · Answer

Hi Stefan,  

We can change the border color and float label color based on the application needs by overriding the below mentioned CSS styles. 





  /*For DatePicker placeholder*/ 
    .customClass.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, 
    .customClass.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text, 
    .customClass.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, 
    .customClass.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, 
    .customClass.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text { 
        color: #4a4ac4; 
    } 
    /*For DatePicker border line*/ 
    .customClass.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, 
    .customClass.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, 
    .customClass.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, 
    .customClass.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after { 
        background: #4a4ac4; 
    } 
    .customClass.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 
    .customClass.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) { 
        border-color: #4a4ac4; 
    } 

  
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Application_EJ21451035861  
  

Regards, Berly B.C

Stefan Heimbach · Answer

Thank u for the fast reply.The css works for the placeholer if i date is selected.But I also need to change the color if no date has been selected.Also I need assistance to open the DatePicker with a Icon onclick. I saw this funtionality somewhere but cant find the post anymore.Thank u for ur help!Attachment: DatepickerAssistance_b9223b7a.zip

Berly Christopher · Answer

Hi Stefan, 

We have shared the sample for changing the float label and border-bottom color both value and without value in the DatePicker input. The below style is used to override the CSS style for the placeholder when the value is not selected in the component.  





  .customClass.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, 
    .customClass.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, 
    .customClass.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text { 
        color: #4a4ac4; 
    } 

For your reference, we have taken video demonstration and attached it below. 

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FloatLabel_151954-686294719  
 
Screenshot for without value: 
 
  
 
Screenshot for with value: 
 
  
 
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Application_EJ21451035861  

Also, please elaborate the requested requirement “open the DatePicker with a Icon onclick” because, the DatePicker popup will be open on the date icon click action. This is the default behavior in the component.  
  
Regards, Berly B.C

Stefan Heimbach · Answer

Hi Berly,ok I think I found the reason why the placeholder does not get the correct color.If I add the AllowEdit="false" parameter to ur sample project the problem occurs. (attached video)Any workaround?Thanks!!Attachment: 20210421_161921_6cd6f7e2.zip

Berly Christopher · Answer

Hi Stefan, 

Thanks for sharing enough information to us.  

When we add AllowEdit as false, the readonly attribute will be added to the input of the component. So, please override the below styles in the application to achieve the requested requirement.  





/* Style when DatePicker is editing is disabled*/ 
    .customClass.e-float-input:not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top), 
    .customClass.e-float-input:not(.e-error) input:focus ~ label.e-float-text, 
    .customClass.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text { 
        color: #4a4ac4; 
    } 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Application_EJ2_151954-1981424605  
 
Screenshot: 
 
On initial rendering: 
 

  
 
With input focus: 
 
  
 
Regards, Berly B.C

Stefan Heimbach · Answer

Thank u Sir. Awesome support like always!

Berly Christopher · Answer

Hi George, 

Most welcome. Please let us know if you need further assistance on this. 

Regards, 
Berly B.C