Datetimepicker with conditional styling

[williamfenn]

I'm using the buefy Datetimepicker and would like to use it in combination with input styling/validation seen here: https://buefy.org/documentation/input. Once the user selects a dateTime, I would like the 'is-success' styling to be applied (the same as it is to all of the b-input fields I have in my form). Can this be accomplished? The 'is-success' styling seems to be ignored in the code below:

      <b-field label="TimeSlot" :type="{ 'is-success': DateTimeSelected }">
          <b-datetimepicker
            name="DateTimeSelected"
            icon="calendar-today"
            v-model="DateTimeSelected"
            :datepicker="{ showWeekNumber }"
            :timepicker="{ enableSeconds, hourFormat: format }"
            :mobile-native="false"
            :date-formatter="dateFormatter"
            horizontal-time-picker
          >
          </b-datetimepicker>
      </b-field>

Thanks for any suggestions/help!

[jtommy]

Can you reproduce it on codepen or similar?

[williamfenn]

Can you reproduce it on codepen or similar?

Here is a codesandbox: https://codesandbox.io/s/hardcore-ptolemy-1pp8x?file=/src/components/dateTimePicker.vue

I figured out that the conditional styling is not showing is due to using vee-validate which is wrapped around the b-datetimepicker. I'm not sure if this would be considered an issue with vee-validate or buefy. You can see this in the codesandbox if you remove the ValidationObserver/ValidationProvider wrapping.

[jtommy]

ValidationObserver should be before b-field and you can use slim prop on it in order to remove span added by vee-validate