vue2 组件封装 el-date-picker 日期-尧图网站建设

📅 发布时间：2026/6/19 18:45:57

vue2 组件封装 el-date-picker 日期

基本使用都满足

包括常用的：

时间格式 ：type [date,datetime,daterange ....]

快捷方式 ：日期左侧：如今天，昨天，一个月前日期

日期禁用：禁用日期段

其它相关属性

custom-date-picker 组件内容

<!--1、isShortcut <boolean> 是否显示快捷方式.默认 true显示 ，false 不显示
--><template><div class="custom-date-picker"><el-date-pickerv-model="dateValue":type="type":format="format":value-format="valueFormat":placeholder="placeholder":disabled="disabled":clearable="clearable":readonly="readonly":picker-options="pickerOptions":range-separator="rangeSeparator":start-placeholder="startPlaceholder":end-placeholder="endPlaceholder"@change="handleChange"@blur="handleBlur"@focus="handleFocus"></el-date-picker></div>
</template><script>
export default {name: "CustomDatePicker",props: {// 绑定值（v-model）
    value: {type: [String, Number, Date, Array], // 单日期为String/Date，范围选择为Arraydefault: null,},// 日期类型：date/datetime/date-range/datetime-range等
    type: {type: String,default: "date",},// style: {//   type: Object,//   default: () => {},// },// 显示格式（如 'yyyy-MM-dd'）
    format: {type: String,default() {// 根据类型默认格式return this.type.includes("datetime")? "yyyy-MM-dd HH:mm:ss": "yyyy-MM-dd";},},// 绑定值格式（传给后端的格式）
    valueFormat: {type: String,default() {return this.type.includes("datetime")? "yyyy-MM-dd HH:mm:ss": "yyyy-MM-dd";},},// 占位符
    placeholder: {type: String,default: "请选择日期",},// 范围选择时的开始占位符
    startPlaceholder: {type: String,default: "开始日期",},// 范围选择时的结束占位符
    endPlaceholder: {type: String,default: "结束日期",},// 范围选择分隔符
    rangeSeparator: {type: String,default: "至",},// 是否禁用
    disabled: {type: Boolean,default: false,},// 是否可清空
    clearable: {type: Boolean,default: true,},// 是否只读readonly: {type: Boolean,default: false,},// 禁用日期的回调函数（如禁用过去日期：(time) => time < Date.now() - 8.64e7）
    disabledDate: {type: Function,default: () => false, // 默认返回 false（所有日期都可选择）
    },// 默认显示。快捷类型 1、显示；0不显示
    isShortcut: {type: [String, Number, Boolean],default: true,},// 错误提示信息（配合表单校验）
    errorMsg: {type: String,default: "",},},data() {return {dateValue: this.value, // 内部绑定值pickerOptions: null,pickerOptionsDate: {shortcuts: [{text: "今天",onClick(picker) {picker.$emit("pick", new Date());},},{text: "一周前",onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit("pick", date);},},{text: "一个月前",onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);picker.$emit("pick", date);},},],disabledDate: this.disabledDate,// disabledDate(time) {//   return time.getTime() > Date.now() - 8.64e6 // 只能选择今天及今天之前的日期// }
      },pickerOptionsRange: {shortcuts: [{text: "今天",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime());picker.$emit("pick", [start, end]);},},{text: "最近三天",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);picker.$emit("pick", [start, end]);},},{text: "最近一周",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit("pick", [start, end]);},},{text: "最近一个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit("pick", [start, end]);},},{text: "最近三个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit("pick", [start, end]);},},{text: "最近半年",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);picker.$emit("pick", [start, end]);},},],disabledDate: this.disabledDate,// disabledDate(time) {//   return time.getTime() > Date.now() - 8.64e6 // 只能选择今天及今天之前的日期// }
      },};},mounted() {this.initType(this.type);},// computed
  watch: {// 监听外部value变化，同步到内部
    value: {handler(val) {this.dateValue = val;},immediate: true,deep: true, // 范围选择时需要深度监听
    },// 内部值变化，同步到外部（v-model）
    dateValue(val) {this.$emit("input", val);},},methods: {initType(type) {// 快捷方式 true显示； false 不显示if (this.isShortcut) {if (type === "daterange") {this.pickerOptions = this.pickerOptionsRange;} else {this.pickerOptions = this.pickerOptionsDate;}} else {// 是否有禁用时间段if (this.disabledDate) {this.pickerOptions = {disabledDate: this.disabledDate,};} else {this.pickerOptions = null;}}},// 日期变化时触发
    handleChange(val) {this.$emit("change", val);},// 失焦事件
    handleBlur(e) {this.$emit("blur", e);},// 聚焦事件
    handleFocus(e) {this.$emit("focus", e);},// 手动清空（可外部调用）
    clear() {this.dateValue = null;},},
};
</script><style lang="scss" scoped>
.custom-date-picker {.el-date-editor--date {width: 100% !important;}.el-date-editor--daterange {width: 100% !important;padding-left: 6px;padding-right: 0;::v-deep .el-range-separator {padding: 0 3px;}::v-deep .el-range__close-icon {width: 20px;}}
}
</style>

import DatePickerTime from "./DatePicker/CustomDatePicker.vue";

页面调用。 date-picker-time

   <el-form-item label="时间1" prop="time1"><date-picker-timetype="date"v-model="ruleForm.time1"></date-picker-time></el-form-item>

如果默认不展示快捷方式

:is-shortcut="false"

<el-form-item label="时间1" prop="time1"><date-picker-timetype="date":is-shortcut="false"v-model="ruleForm.time1"></date-picker-time></el-form-item>

禁用日期段

   <date-picker-timetype="daterange":is-shortcut="false"v-model="ruleForm.time1":disabledDate="handleDisabledDate"></date-picker-time></el-form-item>

  methods: {handleDisabledDate(time) {// 禁用过去的日期return time.getTime() < new Date().setHours(0, 0, 0, 0);// 禁用未来时间//   return time.getTime() > new Date().setHours(0, 0, 0, 0);},

value-format="yyyy-MM-dd hh:mm:ss"

value-format="yyyyMMddHHmmss"