정규식 - Date format

Date format

by jinam yu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <form class="p-4">
    <div class="form-group">
      <label>Generate 버튼을 눌러 보세요.</label>
      <div class="input-group mb-3">
        <input class="form-control" type="text" :value="date" readonly />
      </div>
    </div>
    <div class="form-group">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{selected}}</button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#" @click="convert('YYYY-MM-DD')">YYYY-MM-DD</a>
            <a class="dropdown-item" href="#" @click="convert('YYYY.MM.DD')">YYYY.MM.DD</a>
            <a class="dropdown-item" href="#" @click="convert('MM/DD/YYYY')">MM/DD/YYYY</a>
          </div>
        </div>
        <input class="form-control" type="text" :value="output" readonly />
      </div>
    </div>
  </form>
</div>

CSS

html, body {
  background-color: #f8f9fa;
}

Vue

new Vue({
    el: "#app",
    data: {
        output: "111",
        selected: "YYYY-MM-DD",
    },
    computed: {
    	date(){
      	return new Date().toISOString().slice(0,10).replace(/\-/g, '');
      }
    },
    methods: {
        convert(type){
        	this.selected = type;
        	const res = this.date.replace(/(\d{4})(\d{1,2})(\d{1,2})/, ($f,$1,$2,$3)=>{
          	return type.replace('YYYY', $1).replace('MM', $2).replace('DD', $3);
          });
          this.output = res;
        }
    },
    mounted() {
        this.convert(this.selected);
    }
})