Hide input and only show icon

[Stefan]

Hi

Is it possible to hide input box and only show the calendar icon?

Regards,

Stefan

[Deepak Ramakrishnan]

Hi Stefan, 

Greetings from Syncfusion support. 

Yes we can hide the input by setting ‘Width’ property as ‘0px’ and followed by the below highlighted styles. Kindly refer the below code and sample for your reference. 

@using Syncfusion.Blazor.Calendars 

 

<SfDatePicker TValue="DateTime?" Width="0px"></SfDatePicker> 

 

 

<style> 

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

        padding-left: 0px !important; 

    } 

 

    .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]){ 

        border-color: transparent; 

    } 

 

    .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) { 

        border-color: transparent; 

    } 

    .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon{ 

        border: 0px solid; 

    } 

</style> 

Sample Link :  https://www.syncfusion.com/downloads/support/forum/168791/ze/BlazorApp11633024660 

Kindly revert us if you have any concerns in it. 

Thanks, 

Deepak R. 

[Stefan]

Hi 

Thanks for quick reply. Almost there.

If you set the background color to dark(bg-dark). You can see a white vertical line, see attached image. How to remove this?

Second how do I change calendar icon color to white?

Regards,

/Stefan

[Deepak Ramakrishnan]

Hi Stefan, 

Thanks for your update. 

We have validated your requirement with provided details and created a sample as per requirement. The white vertical line show due to the border color has not changed so here we have changed the border color in the below code and we can change the icon color to set the font color(color attribute) as while kindly find the below high lighted code and sample for your reference 

 

<style> 

 

.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) { 

        border-color: black !important; 

        box-shadow: 0px 0px 0px 0px black !important; 

    } 

 

 

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { 

        border: 0px solid; 

        color: white; 

    } 

 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/168791/ze/BlazorApp1447879510 

 

 

Alternative Solution :  

 

Also You can use different built-in theme sets to modify the UI appearance of our Syncfusion form components . For that kindly refer the below documentation and demo for your reference .  

UG Documentation :  https://blazor.syncfusion.com/documentation/appearance/themes

High contrast theme demo : https://blazor.syncfusion.com/demos/datepicker/default-functionalities?theme=highcontrast 

 

 

Thanks, 

Deepak R.