비교 날짜 ( 시작과 끝 ) 존재할 때 날짜 유효성 검사 로직

---

비교 날짜 ( 시작과 끝 ) 존재할 때 날짜 유효성 검사 로직

 

시작 날짜 선택시 고려 사항

End Date 날짜보다 크면

    ㄴ "끝 날짜보다 많은 날짜를 선택 할 수 없습니다"

    ㄴ Start old Date 를 Start Date 에 삽입

 

 

끝 날짜 선택시 고려 사항

Start Date 날짜보다 작으면

    ㄴ "시작 날짜보다 적은 날짜를 선택 할 수 없습니다"

    ㄴ End old Date 를 End Date 에 삽입

---

기존 코드

<!-- 

  - Date Picker 사용법 
    @auther : sbjung@realsn.com

    - 이벤트
      1. 상위 컴포넌트는 데이터 변경 할 수 있는 이벤트를 만들어 주세요.
      2. 이벤트를 'change:datepicker' 로 설정해주세요.

    - 기본값 설정
      1. dateDefalutValue 에 기본값을 실어서 보내주세요

 -->

 <template>
    <div style = "float: left;">
      <div> 
        <el-button
          @click = "changeDisableByDatePicker"
          style  = "padding: 12px 30px 12px 30px"
          round>
          <i class = "el-icon-date"></i>  {{ date1 }}
          <span style = "padding: 0 10px 0 10px"> ~ </span>
          <i class = "el-icon-date"></i>  {{ date2 }}
        </el-button>
      </div>
      <div 
        style = "float: left; position :relative; z-index: 0;" 
        v-if  = "dateDisable">
        <Datepicker
          style   = "position: absolute; top: 0;  left: 0px;"
          v-model = "date1" 
          :inline = "inline"
          :language="ko"
          :format = "DatePickerFormat"/>
          <Datepicker 
          style   = "position: absolute; top: 0;  left: 300px;"
          v-model = "date2" 
          :inline = "inline"
          :language="ko"
          :format = "DatePickerFormat"/>
      </div> 
  </div>
</template>

<script>
  import Datepicker from 'vuejs-datepicker'
  import {ko} from 'vuejs-datepicker/dist/locale'
  import moment from 'moment';

  export default {
      name: 'DatePacker_1'

      , components: {
          Datepicker
      }

      , props: {
        dateDefalutValue: {
          type    : Array,
          default : function (){
            return [ '2021/12/11', '2021/12/31' ]
          }
        }
        , closeState : false
      }

      , data() {
        return {
          inline : true
          , dateDisable : false
          , date1 : moment().format('YYYY/MM/DD') 
          , date2 : moment().format('YYYY/MM/DD') 
          , DatePickerFormat: 'yyyy-MM-dd'
          , ko : ko
        }
      }

      , created (){
        if( this.dateDefalutValue !=  null || this.dateDefalutValue != undefined ){
          this.date1 = this.dateDefalutValue[0]
          this.date2 = this.dateDefalutValue[1]
        }
      }

      , methods : {

        changeDisableByDatePicker ( ){
          this.dateDisable = !this.dateDisable
        }

        , setDatePicker(){
            this.$emit('change:datepicker',  [
                this.date1
                , this.date2
            ])
        }

        /**  포커스가 벗어나면 date picker 닫아 **/
        , documentClick: function( $e ){
            var el = this.$el;
            var target = $e.target;
            if ( el !== target && !el.contains( target ) ) {
                this.dateDisable = false;
            }
		    }
    }

      , watch : {
        dateDefalutValue(value){
          this.date1 = value[0]
          this.date2 = value[1]
        }
        , date1 ( value ){ 
          this.date1 = moment(new Date(value)).format('YYYY/MM/DD') 
          this.setDatePicker()
        }
        , date2( value ){
          this.date2 = moment(new Date(value)).format('YYYY/MM/DD') 
          this.setDatePicker()
        }

        /** 부모가 data Picker 를 닫을 수 있음 / 여는건 안됨 **/
        , closeState ( ){
            this.dateDisable = false
        }

        /**  포커스가 벗어났는지 확인 **/
        , dateDisable ( $val ){
            if($val){
                document.addEventListener( "click", this.documentClick );
            }
        }
      }
  }
</script>

<style scoped>
.vdp-datepicker__calendar .cell.selected {
    background: #5c80ff;
    border-radius: 20px;
    color: white;
}

.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover{
    background: #26459b;
    border-radius: 20px;
    color: white;
    border-color: #3f3cff;
}
</style>

 

비교 코드

 

<!-- 
  - Date Picker 사용법 
    @auther : sbjung@realsn.com

    - 이벤트
      1. 상위 컴포넌트는 데이터 변경 할 수 있는 이벤트를 만들어 주세요.
      2. 이벤트를 'change:datepicker' 로 설정해주세요.

    - 기본값 설정
      1. dateDefalutValue 에 기본값을 실어서 보내주세요
 -->

<template>
  <div style = "float: left;">
    <div> 
      <el-button
        @click = "changeDisableByDatePicker"
        style  = "padding: 12px 30px 12px 30px"
        round>
        <i class = "el-icon-date"></i>  {{ dateStr1 }}
        <span style = "padding: 0 10px 0 10px"> ~ </span>
        <i class = "el-icon-date"></i>  {{ dateStr2 }}
      </el-button>
    </div>
    <div 
      style = "float: left; position :relative; z-index: 0;" 
      v-if  = "dateDisable">
      <Datepicker
        style     = "position: absolute; top: 0;  left: 0px;"
        v-model   = "date1" 
        :inline   = "inline"
        :language = "ko"
        :format   = "DatePickerFormat"/>
        <Datepicker 
        style     = "position: absolute; top: 0;  left: 300px;"
        v-model   = "date2" 
        :inline   = "inline"
        :language = "ko"
        :format   = "DatePickerFormat"/>
    </div> 
  </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker'
import moment from 'moment';
import { ko } from 'vuejs-datepicker/dist/locale'

export default {
    name: 'DatePacker_1'

    , components: {
        Datepicker
    }

    , props: {
      dateDefalutValue: {
        type    : Array,
        default : function (){
          return [ 
            moment().format('YYYY/MM/DD') 
            , moment().format('YYYY/MM/DD')  
          ]
        }
      }
      , closeState : false
    }

    , data() {
      return {
        date1              : moment().format('YYYY/MM/DD') 
        , date2            : moment().format('YYYY/MM/DD')
        , dateStr1         : moment().format('YYYY/MM/DD')  
        , dateStr2         : moment().format('YYYY/MM/DD') 
        , DatePickerFormat : 'yyyy-MM-dd'
        , dateDisable      : false
        , inline           : true
        , ko               : ko
        , sendDate         : []
      }
    }

    , created (){
      if( this.dateDefalutValue !=  null || this.dateDefalutValue != undefined ){
        this.date1 = this.dateDefalutValue[0]
        this.date2 = this.dateDefalutValue[1]
      }
    }

    , methods : {
      changeDisableByDatePicker ( ){
        this.dateDisable = !this.dateDisable
      }

      , setDatePicker(){
        // sendDate 는 데이터 연속 전송 방지 변수입니다.
        if( this.sendDate[0] === this.date1 && this.sendDate[1] === this.date2 ){
          return
        }
        this.sendDate = [
          this.date1
          , this.date2
        ]
        this.$emit('change:datepicker', this.sendDate )
      }

      /**  포커스가 벗어나면 datePicker 닫습니다 **/
      , documentClick: function( $e ){
        var el = this.$el;
        var target = $e.target;
        if ( el !== target && !el.contains( target ) ) {
            this.dateDisable = false;
        }
      }
  }

  , watch : {
    dateDefalutValue(value){
      this.date1 = value[0]
      this.date2 = value[1]
    }

    , date1 ( newValue , oldValue ){ 
      if( moment(new Date(newValue)).format('YYYY/MM/DD') > moment(new Date(this.date2)).format('YYYY/MM/DD')){
        this.$alert('끝 날짜보다 클 수 없습니다')
        this.date1 =  moment(new Date(oldValue)).format('YYYY/MM/DD') 
        this.dateStr1 =  moment(new Date(oldValue)).format('YYYY/MM/DD') 
      }else{
        this.date1 =  moment(new Date(newValue)).format('YYYY/MM/DD') 
        this.dateStr1 =  moment(new Date(newValue)).format('YYYY/MM/DD') 
      }
      this.setDatePicker()
    }

    , date2( newValue, oldValue ){
      if( moment(new Date(newValue)).format('YYYY/MM/DD') < moment(new Date(this.date1)).format('YYYY/MM/DD')){
        this.$alert('시작 날짜보다 작을 수 없습니다')
        this.date2 =  moment(new Date(oldValue)).format('YYYY/MM/DD') 
        this.dateStr2 =  moment(new Date(oldValue)).format('YYYY/MM/DD') 
      }else{
        this.date2 =  moment(new Date(newValue)).format('YYYY/MM/DD') 
        this.dateStr2 =  moment(new Date(newValue)).format('YYYY/MM/DD') 
      }
      this.setDatePicker()
    }

    /** 부모가 data Picker 를 닫을 수 있음 / 여는건 안됨 **/
    , closeState ( ){
        this.dateDisable = false
    }

    /**  포커스가 벗어났는지 확인 **/
    , dateDisable ( $val ){
      if($val){
          document.addEventListener( "click", this.documentClick );
      }
    }
  }
}
</script>

<style scoped>
.vdp-datepicker__calendar .cell.selected {
  background: #5c80ff;
  border-radius: 20px;
  color: white;
}

.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover{
  background: #26459b;
  border-radius: 20px;
  color: white;
  border-color: #3f3cff;
}
</style>

---