JSFiddle - React, Tailwind, and code Playground

by Angelin Calu

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">   
       
       <div class="row">
               <div class="form-group col-md-8 col-md-offset-2">
                   <birthday-controls
                   :birthDay="birthDay"
                   :birthMonth="birthMonth"
                   :birthYear="birthYear"
                   @birthday-change="birthDayChanged"
                   @birthmonth-change="birthMonthChanged"
                   @birthyear-change="birthYearChanged">
                   </birthday-controls>
               </div>
           </div>
</div>

JavaScript

Vue.component('birthday-controls', {

    template: `<div class="birthday">
    <input type="text" name="year"  placeholder="yyyy" v-model="var_birthYear" size="4" maxlength="4"/>
    <input type="text" name="month" placeholder="mm" v-show="validYear" v-model="var_birthMonth" size="3" maxlength="2"/>
    <input type="text" v-show="validYear && validMonth" name="day" placeholder="dd" v-model="var_birthDay" size="2" maxlength="2"/>
  </div>`,

    props: ['birthDay', 'birthMonth', 'birthYear'],

    created() {
        this.var_birthDay = this.birthDay,
        this.var_birthMonth = this.birthMonth,
        this.var_birthYear = this.birthYear
      },

    data () {
        return {
            var_birthDay: '',
            var_birthMonth: '',
            var_birthYear: ''
        }
    },

    computed: {
        validYear: function() {
            return (this.birthYear > new Date().getFullYear()-100 && this.birthYear < new Date().getFullYear()-14)
        },
        validMonth: function() {
            return (this.birthMonth > 0 && this.birthMonth <= 12)
        },
        validDay: function() {
            return (this.birthDay > 0 && this.birthDay <=31) //I have to add more checking here for february, leap years and stuff
        }
    },

    watch: {
        var_birthYear() {
            this.$emit('birthyear-change', this.birthYear);
        },

        var_birthMonth() {
            this.$emit('birthmonth-change', this.birthMonth);
        },

        var_birthDay() {
            this.$emit('birthday-change', this.birthDay);
        }
  }

});



new Vue({
    el: '#app',

    data: function() {
        return {
            birthDay: "",
            birthMonth: "",
            birthYear: ""
        }
    },
    
  
  
    methods: {

        birthYearChanged: function(birthYear) {
            this.birthYear = birthYear;
        },

        birthMonthChanged: function(birthMonth) {
            this.birthMonth = birthMonth;
        },

       ...