{"id":4721,"date":"2024-03-13T22:37:13","date_gmt":"2024-03-13T14:37:13","guid":{"rendered":"https:\/\/blog.odjbinail.cn\/?p=4721"},"modified":"2024-03-13T22:37:13","modified_gmt":"2024-03-13T14:37:13","slug":"vue3elementplus-el-date-picker-%e6%97%b6%e9%97%b4%e8%8c%83%e5%9b%b4%e8%ae%be%e7%bd%ae-%e5%9b%ba%e5%ae%9a%e6%97%b6%e9%97%b4%e6%ae%b5%e4%b8%ba%e4%b8%80%e5%b9%b4%e5%86%85-%e9%80%89%e4%b8%ad%e5%89%8d","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=4721","title":{"rendered":"Vue3+ElementPlus el-date-picker \u65f6\u95f4\u8303\u56f4\u8bbe\u7f6e, \u56fa\u5b9a\u65f6\u95f4\u6bb5\u4e3a\u4e00\u5e74\u5185 \/ \u9009\u4e2d\u524d\u540e5\u5929"},"content":{"rendered":"

Vue3 template \u90e8\u5206<\/h2>\n
 <el-date-picker\n        v-model="selectButton"\n        type="daterange"\n        size="large"\n        range-separator="To"\n        value-format="YYYY-MM-DD"\n        popper-class="choose-day-popper"\n        start-placeholder="\u5f00\u59cb\u65e5\u671f"\n        end-placeholder="\u7ed3\u675f\u65e5\u671f"\n        :disabled-date="disabledDate"\n        @change="dataSelect"\n        @calendar-change="calendarChange"\n    \/><\/code><\/pre>\n
    \n
  • calendar-change: \u5728\u65e5\u5386\u6240\u9009\u65e5\u671f\u66f4\u6539\u65f6\u89e6\u53d1<\/li>\n<\/ul>\n
    vue3 \u903b\u8f91\u90e8\u5206 \u91c7\u7528 setup \u8bed\u6cd5\u7cd6 \u5b8c\u6574\u4ee3\u7801\u5982\u4e0b<\/h2>\n
    const selected = ref(false);\/\/\u5224\u65ad\u662f\u5426\u9009\u4e2d\u4e00\u4e2a\u65e5\u671f\nconst selectDate = ref();\/\/\u5f00\u59cb\u65e5\u671f\nconst selectButton = ref();\nconst emit = defineEmits(["update:modelValue", "select"]);\n\nconst calendarChange = (time) => {\n  let startTime\n  if (time[0] != null && time[1] == null) {\n    startTime = time[0].getTime();\/\/\u5f00\u59cb\u65e5\u671f\n    selectDate.value = startTime;\n    selected.value = true\n  }\n}\n\nconst disabledDate = (date) => {\n  if (!selected.value) {\n    let currDate = new Date();\n    currDate.setFullYear(currDate.getFullYear() - 1);\/\/\u8bbe\u7f6e\u65e5\u671f\u5bf9\u8c61\u7684\u5e74\u4efd\u4e3a\u53bb\u5e74\n    return date.getTime() > Date.now() || date.getTime() < currDate.getTime();\/\/\u56fa\u5b9a\u9009\u62e9\u8303\u56f4\u4e3a\u4e00\u5e74\u5185\n  } else {\n    let currTime = selectDate.value;\n    let startTime = currTime - (24 * 4 * 60 * 60 * 1000);\/\/5 \u5929\u524d\u7684\u65e5\u671f\n    let endTime = currTime + (24 * 4 * 60 * 60 * 1000);\/\/5 \u5929\u540e\u7684\u65e5\u671f\n    let nowTime = Date.now();\n    endTime = endTime > nowTime ? nowTime : endTime;\/\/\u5982\u679c 5 \u5929\u540e\u7684\u65e5\u671f\u5728\u73b0\u5728\u65e5\u671f\u4e4b\u524d, \u5219\u622a\u6b62\u4e3a nowTime, \u5426\u5219\u4e3a endTime\n    let time = date.getTime();\n    return !(time >= startTime && time <= endTime);\n  }\n}\n\nconst dataSelect = (val) => {\n  if (val !== null) {\n    selected.value = false\n    emit("select", val);\n  } else {\n    emit("select", false);\n  }\n  emit("update:modelValue", val);\n};\n<\/script><\/code><\/pre>\n
    \u6548\u679c\u56fe<\/h2>\n
    \"\"<\/p>\n
    \"\"<\/p>\n
    Vue3 template \u90e8\u5206 <el-date-picker v-model="selec […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4721","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4721"}],"version-history":[{"count":8,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4721\/revisions"}],"predecessor-version":[{"id":4732,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4721\/revisions\/4732"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}