Display Format vs. Internal Value

Use format to control how the date appears to users, and value-format to define the string format passed to the model:

<el-date-picker
  v-model="company.establishmentDate"
  type="date"
  placeholder="Select a date"
  format="YYYY/MM/DD"
  value-format="YYYY-MM-DD"
  suffix-icon="Calendar"
/>

Right-Aligned Calendar Icon with Conditional Clear Button

To avoid icon overlap and dynamical switch between calendar and clear icons:

<el-date-picker
  v-model="company.establishmentDate"
  type="date"
  placeholder="Select a date"
  format="YYYY-MM-DD"
  value-format="YYYY-MM-DD"
  :prefix-icon="company.establishmentDate ? 'Calendar' : ''"
  style="width: 500px"
/>

Apply scoped styles to reposition the prefix icon to the right and adjust input padding:

:deep(.el-date-editor) {
  .el-input__prefix {
    position: absolute;
    right: 0;
    top: 0;
  }
  input {
    padding-left: 15px;
  }
}

:deep(.el-date-editor input) {
  padding-left: 0;
}

:deep(.el-icon-calendar) {
  position: absolute;
  right: 25px;
}

Handling Null Values on Clear Action

Clicking the × button sets the bound model to null. Ensure your logic accounts to this, especially when validating or serializing form data.

Disabling Past Dates

Restrict selection to today and future dates using disabled-date:

<el-date-picker
  v-model="selectedDate"
  type="date"
  placeholder="Choose a date"
  :disabled-date="disablePastDays"
/>

const disablePastDays = (date: Date) => {
  const cutoff = new Date();
  cutoff.setHours(0, 0, 0, 0);
  return date.getTime() < cutoff.getTime();
};

DateTime Picker with Default Time and Past-Date Restriction

For datetime inputs that default to current time and disable past dates:

<el-date-picker
  v-model="task.expiryTime"
  type="datetime"
  format="YYYY-MM-DD HH:mm"
  value-format="YYYY-MM-DD HH:mm:ss"
  :default-time="initialTime"
  :disabled-date="disablePastDays"
  placeholder="Select reminder time"
/>

const task = reactive({
  expiryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  // ... other fields
});

const initialTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));

Restricting Selection to Days Before Yesterday

Allow only dates strictly earlier than the day before today:

<el-date-picker
  v-model="chosenDate"
  type="date"
  placeholder="Pick a date"
  :disabled-date="disableFromYesterday"
/>

const disableFromYesterday = (date: Date) => {
  const now = new Date();
  const cutoff = new Date(now);
  cutoff.setDate(now.getDate() - 2);
  cutoff.setHours(0, 0, 0, 0);
  return date.getTime() >= cutoff.getTime();
};

Controlling Popover Placement

Prevent dropdown clipping by forcing bottom-aligned positioning and disabling teleportation:

<el-date-picker
  v-model="dateRange"
  type="daterange"
  range-separator="–"
  start-placeholder="Start date"
  end-placeholder="End date"
  format="YYYY/MM/DD"
  value-format="YYYY-MM-DD"
  placement="bottom-end"
  :teleported="false"
/>