How to apply custom styles to a read-only date field?

I have a requirement where I need to custom style date field (Read-only), I’m unable to find where I can apply custom styling.

In below image, i want to make “23 june,2023” → “23 june,2023” How can i change font-weight and color of ready-only date?

@pacchi Do use existing control and / or label formats over any helper classes or css overrides. You can also make changes in the skin or extend style sheets from the skin. The .dataLabelForRead selector comes to mind if you want to style specific read-only elements (which will need the right amount of specificity to avoid worse ripple effects).

Hi @BasRulesMatter! ,

  1. No control format is available for custom display for the date.
  2. If I use the Label format the output will be like the below image

Date format when we use display type as label

  1. Global selector .dataLabelForRead will affect the entire application, how to point extend style sheets to the specific field type?

Thanks,

Prashanth

@pacchi To follow up:

  • If you have a custom skin or a specialization of an existing skin in your own ruleset, make the change to the control format there or create a new control format and apply it
  • If not, check if there is a suitable helper class and if it’s doable to work with this for every current and future reference
  • If not, you can still make changes to one of the style sheets part of the skin or inherited skin. You can find the style sheets used during runtime in the skin rule:

Instead of using the most global selector .dataLabelForRead**,** you’ll need nested selectors (you can use dev tools to identify which selectors are used for a certain element and play with that). There are some obvious drawback to this, mostly maintainability and level of expertise needed

@BasRulesMatter! Great, thanks mate it worked!!