[Vue.js] el-date-picker 달력 옵션 설정 방법(날짜선택)

vue.js 프로젝트 시 검색조건에서 기간을 설정하는 부분에 el-date-picker로 볼 수도 있다.

el-date-picker를 처음 보는 사람은 많이 당황스러울 것이다.

el-date-picker에 대해 몇가지 옵션들을 살펴보도록 하자.

이것만 알면 el-date-picker 옵션에 대해 편하게 설정할 수 있을 것이다.

 

아래 el-date-picker 속성값을 하나씩 살펴보겠다.

<el-date-picker  v-model="startDate"  type="date"  placeholder="시작일"  value-format="yyyyMMdd"  @change="changeDate('start')"  :picker-options="startDateOptions" ></el-date-picker>

 

el-date-picker태그에 type 속성을 보게 되면 대표적으로 4가지를 들 수 있다.

type="date"	type="week"
type="month"	type="year"

value-format 속성으로 해당 value값을 원하는 형식으로 설정할 수 있다.

value-format="yyyyMMdd" 해당 값을 찍어보면 "20210813"과 같이 찍힐 것이다.

 

:picker-option을 통해 지정한 범위밖의 날짜를 선택할 수 없도록 날짜 범위를 설정할 수 있다.

picker-option을 설정할 경우 달력에서 선택된 날짜가 지정된 기간범위를 벗어나는 날짜부터 선택할 수 없도록 사진과 같이 disabled처리 해준다.

 

아래 로직은 현재날짜의 1년전 날짜부터 오늘까지 선택이 가능하고 시작일과 종료일 기간이 최대 한달로 설정되도록 짠 로직이다.

<template><div><div><el-date-picker        v-model="startDate"        type="date"        placeholder="시작일"        value-format="yyyyMMdd"        @change="changeDate('start')"        :picker-options="startDateOptions" ></el-date-picker></div> <div> <el-date-picker         v-model="endDate"         type="date"         placeholder="종료일"         value-format="yyyyMMdd"         @change="changeDate('end')"         :picker-options="endDateOptions"       ></el-date-picker> </div> </div></template><script> import moment from 'moment'export default {  name: 'DateCheck',   data() {     return {       startDate: '',       endDate: '', startDateOptions: {         disabledDate: this.disabledStDate       },     endDateOptions: {         disabledDate: this.disabledEdDate       },    } },  created() { this.startDate = moment().format('YYYYMMDD')this.endDate = moment().add(-1, 'months').format('YYYYMMDD')},methods: { disabledStDate(date) {       date = moment(String(date)).format('YYYYMMDD')     return date > moment().format('YYYYMMDD') || date < moment().add(-1, 'years').format('YYYYMMDD')     }, disabledEdDate(date) {       date = moment(String(date)).format('YYYYMMDD')       return date > moment().format('YYYYMMDD') || date < this.searchData.startDate     },     changeDate(type) {       if (type === 'start') {        if (this.endDate === null || this.startDate > this.endDate) {          this.endDate = this.startDate         }        if (moment(this.startDate).isBefore(moment(this.endDate).subtract(1, 'months').format('YYYYMMDD'))) {           alert('검색 기간은 최대 1개월까지 선택 가능 합니다.')         this.startDate = moment(this.endDate).subtract(1, 'months').format('YYYYMMDD')         }       } else if (type === 'end') {        if (this.startDate === null) {          this.startDate = this.endDate         }       if (moment(this.endDate).isAfter(moment(this.startDate).add(1, 'months').format('YYYYMMDD'))) {           alert('검색 기간은 최대 1개월까지 선택 가능 합니다.')          this.endDate = moment(this.startDate).add(1, 'months').format('YYYYMMDD')         }       }   }  } } </script> <style> </style>