时间和日期选择器 type='datetime-local'

Question

I have two text-field html elements to pick start and end date/time respectively. How to make start date/time less than end date/time?

<v-text-field
  id="setTime"
  outlined
  type="datetime-local"
  label="Start time"
  v-model="plan.start"
>
</v-text-field>

Answer 1

first, disable end date/time conditional if there is no start date/time it must be disabled. after that when user select start date/time then on validation check if end date/time is lessThan start date/time return error, also, you can disable days lessThan start day/time in end date/time field (read your date/time picker library document)

you can use yup for validation date-time or do it manually:

if your date/time is in epoch format it's like this

const schema = yup.object({
  fromDate: yup.number().required(),
  toDate: yup.number().moreThan(yup.ref("fromDate")).required(),
});

I hope it help you