How can I disable time in element plus datetime picker

Question

I am using element plus DateTimePicker with vue3. how do I disable past time, from today's date. I didn't find any prop for the same

Answer 1

There is a disabled-date attribute. As described in docs it is a function determining if a date is disabled with that date as its parameter and should return a Boolean.

That function could look like this:

const disabledDate = (time: Date) => {
  // setHours sets it to the beginning of day so it includes today also
  let today = new Date().setHours(0, 0, 0, 0)
  return time.getTime() < today
}

Full example

Update

If you need to disable time you can use attributes from TimePicker since DateTimePicker is derived from DatePicker and TimePicker.

So your template can look like this:

<el-date-picker
  v-model="value"
  type="datetime"
  placeholder="Pick a day & time"
  :disabled-date="disabledDate"
  :disabled-hours="disabledHours"
  :disabled-minutes="disabledMinutes"
  :disabled-seconds="disabledSeconds"
/>

Example is here