Readonly setting prevents :valid pseudo selector from working

I'm using :focus and :valid pseudo selectors in my css to move my input placeholders from within the input field up above the respective field as a label.

The angular-datepicker sets the field as readonly which prevents the :valid pseudo selector from working as expected. I was able to remove the code setting the input as readonly and confirm that my placeholder/labels worked as expected.

I was wondering if you could suggest another workaround (maybe a preventDefault()?) to prevent the keyboard from popping up though. Any help would be appreciated.