how to put date widget rounded corner?

[soumyabiswal]

i am using Date widget in thingworx V-8.5 (Updated one), but i am not able to put border radius in date widget please any one help me on that.

if i am using custom CSS for this: 

  .customDate {
      border: 2px solid red;
      border-radius: 25px;
   }

then this type of screen i am getting

[slangley]

Hi @soumyabiswal.

We're doing some testing with this and will get back with you once we have more information.

Regards.

--Sharon

[soumyabiswal]

thanks fro your feedback.

please let me know any update ASAP this stopping my work.

[PEHOWE · Accepted solution]

@soumyabiswal ,

I had a conversation with R&D and have a solution, or more correctly 3 solutions.

• To set the color of the label field on the Date Picker

  .widget-ptcsdatepicker::part(label){
      color: orange;
  }​

• To set rounded corners on the existing date picker box
  

  /* Version one */
  .widget-ptcsdatepicker::part(date-field-text-box) {
      border-radius: 25px;
  }​

• Version 1

• The part field for the text-box is nested two levels deep in the shadow-roots.

• Add a border and set it to have rounded corners

  /* version two */
  .widget-ptcsdatepicker::part(date-field) { 
      border: 1px solid green;
      border-radius: 25px;
  }​

• Version 2
• This is a little different from the first.
• Specify the rounding  on the datepicker

  /* Version three */ 
  .widget-ptcsdatepicker {
      border: 1px solid red;
      border-radius: 25px;
  }​

• Version 3

Hope this helps.

Peter

[slangley]

Hi @soumyabiswal.

If the previous response answered your question, please mark it as the Accepted Solution for the benefit of others with the same question.

Thank you for participating in our Community!

Regards.

--Sharon