dateField

Need more details are you trying to capture the date or you just want to show already existing date. 

If it's capturing and you using date field , we can't change the colors but we can write validations (That's how the component is). If it's just showing the captured date we  got various options.....(Rich text field). 

For Capturing We can do it in this way but i don't recommend it for better UI/UX

a!localVariables(
  local!date,
  {
    a!cardLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!cardLayout(
                  style: if(
                    a!isNullOrEmpty(local!date),
                    null,
                    if(local!date < today(), "ERROR", null)
                  ),
                  showBorder: false,
                  contents: a!dateField(
                    label: "Date",
                    labelPosition: "ABOVE",
                    value: local!date,
                    saveInto: {local!date},
                    validations: {}
                  )
                )
              }
            ),
            a!columnLayout(contents: {})
          }
        )
      },
      height: "AUTO",
      style: "TRANSPARENT",
      marginBelow: "STANDARD"
    )
  }
)

Need more details are you trying to capture the date or you just want to show already existing date. 

If it's capturing and you using date field , we can't change the colors but we can write validations (That's how the component is). If it's just showing the captured date we  got various options.....(Rich text field). 

For Capturing We can do it in this way but i don't recommend it for better UI/UX

a!localVariables(
  local!date,
  {
    a!cardLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!cardLayout(
                  style: if(
                    a!isNullOrEmpty(local!date),
                    null,
                    if(local!date < today(), "ERROR", null)
                  ),
                  showBorder: false,
                  contents: a!dateField(
                    label: "Date",
                    labelPosition: "ABOVE",
                    value: local!date,
                    saveInto: {local!date},
                    validations: {}
                  )
                )
              }
            ),
            a!columnLayout(contents: {})
          }
        )
      },
      height: "AUTO",
      style: "TRANSPARENT",
      marginBelow: "STANDARD"
    )
  }
)

in a editable grid i have a date column, for that in read only have to show in date in red colour if date is less than today 

i have tried using but getting error

component that is not supported in the grid layout. Received FormattedText

We can't use  richtextitem standalone ...You need to use it inside richtextdisplayfield()