Vue.js Element-UI

by ChangJoo Park

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/1.4.3/theme-default/index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.4.3/index.js"></script>
<script src="https://unpkg.com/[email protected]/lib/umd/locale/en.js"></script>
  <div id="app">
    <div class="block">
      <span class="demonstration">날짜 선택기</span>
      <el-date-picker v-model="value1" type="date" placeholder="Pick a day">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">바로가기 옵션</span>
      <el-date-picker v-model="value2" type="date" placeholder="Pick a day" :picker-options="pickerOptions">
      </el-date-picker>
    </div>
  </div>

JavaScript

ELEMENT.locale(ELEMENT.lang.en)

const app = new Vue({
  el: '#app',
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: 'Today',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: 'Yesterday',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: 'A week ago',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
    };
  }
})