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

[George]

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]

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ó]

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

[Berly Christopher]

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]

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]

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]

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]

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]

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]

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]

Thank u Sir. Awesome support like always!

[Berly Christopher]

Hi George, 

Most welcome. Please let us know if you need further assistance on this. 

Regards, 

Berly B.C