cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - New to the community? Learn how to post a question and get help from PTC and industry experts! X

how to put date widget rounded corner?

soumyabiswal
6-Contributor

how to put date widget rounded corner?

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

 

soumyabiswal_0-1591071637904.png

 

1 ACCEPTED SOLUTION

Accepted Solutions

@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 1Version 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 2Version 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 3Version 3

Hope this helps.

Peter

 

View solution in original post

4 REPLIES 4
slangley
23-Emerald II
(To:soumyabiswal)

Hi @soumyabiswal.

 

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

 

Regards.

 

--Sharon

 

 

soumyabiswal
6-Contributor
(To:slangley)

thanks fro your feedback.

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

 
 
 
 
 

 

@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 1Version 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 2Version 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 3Version 3

Hope this helps.

Peter

 

slangley
23-Emerald II
(To: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

Top Tags