Hello,

Please have a look at the following support article:  

https://community.pega.com/support/support-articles/skin-does-not-provide-option-customize-datetime-control

As mentioned in the article, you should consider creating a custom class, and reference this class in the Advanced Presentation options for the DateTime control. You can define your custom CSS for the class in the UserWorkForm HTML fragment, or add a custom stylesheet to your application skin.

Regards,

Brian

Hi Hasnaa,

For a custom image to the right side of date-time control, make use 'background-image' style of inactvIcon class.

Refer screenshot-1

For height, width and border etc., Add a custom class(for suppose "test") to date-time field both for read-only and read-write styles in presentation tab or can create a new format in SKIN.

Then making use of the test class, add something like below in your application SKIN css, or css referred in harness or Userworkform. Below style is only to set the height. You can play around with other styles for width and border according at your requirement.

Refer screenshot-2