Disabling just DateField textfield without calendar button

Support
#1

Is there a way to disable just the textfield part of the DateField component letting users to choose date from the calendar without letting them to edit through textfield?

#3

Hello @thewaffoss

Yes, you can do it by extending the halo theme via CUBA Studio and few SCSS rules.

XML:

<dateField id="df"
           resolution="DAY"
           stylename="without-input"/>

.c-datefield-composition-without-input {
  .v-datefield {
    width: auto !important;

    [class*="textfield"] {
      width: 0;
      padding-right: 21px;
    }

    [class*="button"] {
      padding: 0;
    }
  }
}

I’ve also created a small project for you with a demo:

datefield-calendar-only.zip (81.0 KB)

Regards,
Daniil.