How to change DateTimePicker's border color

[Szöke Istvan]

Dear Syncfusion Support!

Could you provide me a solution for changing your DateTimePicker component's border color?

Thanks in advance!

Regards,

Istvan

[Berly Christopher]

Hi Szöke, 

  

Greetings from Syncfusion support. 

  

We can change the border colour of the DateTimePicker by overriding the CSS styles of the input group or with help of CssClass property as mentioned in the below code example. 

  

 

<SfDateTimePicker TValue="DateTime?" CssClass="e-custom"></SfDateTimePicker> 

 

<style> 

    /* By using cssclass property*/ 

    .e-input-group.e-control-wrapper.e-custom.e-datetime-wrapper{ 

        border-color:#0057ff !important; 

    } 

</style> 

 

  

(or) 

  

 

<SfDateTimePicker TValue="DateTime?"></SfDateTimePicker> 

 

<style> 

    /*By overriding the input group 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: #0057ff; 

    } 

</style> 

 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/155676/ze/DateTime_155676_border1704084171  

  

Regards, 

Berly B.C 

[Szöke Istvan]

Hello Berly B.C,

Thanks for the style, it works perfectly.

Regards,

Istvan

[Berly Christopher]

Hi Szöke, 

  

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

  

Regards, 

Berly B.C 

[Szöke Istvan]

Hi Berly,

Is there any way to change the DateTimePicker's border color to red only, when the input field is modified AND invalid? I am using EditForm to validate my forms on my pages.

Regards,

Istvan

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Szöke, 

Thanks for your update. 

We can change the border color of DateTimepicker to red when it is edited with the help of CssClass property. Please find the sample below.


 

<EditForm Model="@m_ModelValue"> 

    <DataAnnotationsValidator /> 

    <SfDateTimePicker TValue="DateTime?" CssClass="@cssclasstb" @oninput="OnInput" > 

        <DateTimePickerEvents TValue="DateTime?" ValueChange="OnDateChange"></DateTimePickerEvents> 

    </SfDateTimePicker> 

    <button type="submit">Submit</button> 

</EditForm> 

@code { 

    public User m_ModelValue { get; set; } = new User(); 

    public string cssclasstb { get; set; } 

 

    protected void OnInput(ChangeEventArgs args) 

    { 

        var value = (args.Value ?? String.Empty).ToString(); 

        if (value.Length > 0) 

            cssclasstb = "e-error"; 

        else 

            cssclasstb = ""; 

        StateHasChanged(); 

    } 

 

    protected void OnDateChange(ChangedEventArgs<DateTime?> args) 

    { 

        cssclasstb = "e-success"; 

    } 

    public class User 

    { 

        [Required] 

        public string FirstName { get; set; } 

        [Required] 

        public int? Id { get; set; } 

    } 

 

} 

Screenshot:


 

 

We have made sample for your convenience and kindly check the same in the attachment. Hope it helps to meet your requirements.

Sample Link       : https://www.syncfusion.com/downloads/support/forum/155676/ze/DateTimepicker_border-color2062398593 

Regards, 

Jeyanth.

 

[Szöke Istvan]

Hi Jeyanth,

Thanks for your help!

Regards,

Istvan

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Szöke,

We are glad to hear that your issue has been resolved. Please let us know if you need any further assistance on this.

Regards, 

Jeyanth.