JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <input type="radio" value="YMD" v-model="order">YMD
  <input type="radio" value="DMY" v-model="order">DMY
  <input type="radio" value="MDY" v-model="order">MDY
  <hr>
  {{ order }}
  <template v-for="(letter, index) in order" :key="letter">
    <span v-if="index"> - </span>
    <Day v-if="letter === 'D'" label="Day" :value="day"></Day>
    <Month v-else-if="letter === 'M'" label="Month" :value="month"></Month>
    <Year v-else-if="letter === 'Y'" label="Year" :value="year"></Year>
  </template>
</div>

JavaScript

const DateComponent = {
  template: '<div>{{ label }}: <input :value="value"></div>',
  props: ['label', 'value']
}

Vue.createApp({
	components: {
    Day: DateComponent,
    Month: DateComponent,
    Year: DateComponent
  },

  data () {
    return {
      order: 'YMD',
      day: 30,
      month: 12,
      year: 2021
    }
  }
}).mount('#app')