v-models, emits, vue3

App.vue

<template>
  <datpicker
    v-model:day="store.day"
    v-model:month="store.month"
    v-model:year="store.year"
    @birthDate="checkit"
  />
</template>

<script>
import datpicker from "./components/datepicker.vue";
import useAge from "./composables/store.js";

export default {
  name: "App",
  components: {
    datpicker,
  },

  setup() {
    function checkit(event) {
      console.log(event);
    }

    const store = useAge();

    return {
      checkit,
      store,
    };
  },
};
</script>

datepicker.vue

<template>
  <div class="custom-select">
    <select v-model="dayref">
      <option disabled value="">Days</option>
      <option v-for="day in days" :key="day" :value="day">
        {{ day }}
      </option>
    </select>
  </div>
  <div class="date-picker">
    <div class="custom-select">
      <select v-model="monthref">
        <option disabled value="">Month</option>
        <option v-for="(month, index) in months" :key="month" :value="index">
          {{ month }}
        </option>
      </select>
    </div>
    <div class="custom-select">
      <select v-model="yearref">
        <option disabled value="">Year</option>
        <option v-for="year in years" :key="year" :value="year">
          {{ year }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
import { useModelWrapper } from "../composables/modalwrapper";
import { range, months } from "../composables/functions.js";
import { computed, watchEffect } from "vue";
import { getDaysInMonth } from "date-fns";

export default {
  emits: ['birthDate'],
  props: ["day", "month", "year"],
  setup(props, { emit }) {
    const years = range(1920, new Date().getFullYear() + 1).reverse();

    const days = computed(() =>
      getDaysInMonth(new Date(props.year, props.month))
    );

    watchEffect(() => {
      const dateobj = new Date(props.year, props.month, props.day);
      emit("birthDate", dateobj);
    });

    return {
      days,
      months,
      years,
      dayref: useModelWrapper(props, emit, "day"),
      monthref: useModelWrapper(props, emit, "month"),
      yearref: useModelWrapper(props, emit, "year"),
    };
  },
};
</script>

<style scoped>
/* wrapper-div for including arrow */
.custom-select {
  background-color: #eee;
  float: left;
  margin-right: 10px;
  position: relative;
}

.custom-select select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none; /* remove default styling */
  background-color: inherit;
  border: none;
  color: #333;
  display: block;
  font-size: 16px;
  height: 32px;
  padding: 5px 30px 5px 10px;
  margin: 0;
  outline: none;
}

/* drop arrow */
.custom-select:after {
  content: "\25bc";
  color: #aaa;
  font-size: 12px;
  position: absolute;
  right: 8px;
  top: 10px;
}
</style>

functions.js

//Creates and maps list of months to array
const months = Array.from(Array(12), (v, i) =>
  new Date(0, i).toLocaleString({}, { month: "long" })
);

//Range numbers
const range = (start, end) => [...Array(end - start)].map((_, i) => start + i);

export { months, range };

modalwrapper.js

import { computed } from "vue";
export function useModelWrapper(props, emit, name = "modelValue") {
  return computed({
    get: () => props[name],
    set: (value) => emit(`update:${name}`, value),
  });
}

package.json

{
  "name": "proj2",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@vueuse/core": "^4.0.0-beta.40",
    "date-fns": "^2.16.1",
    "vue": "^3.0.2"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.8",
    "@vue/compiler-sfc": "^3.0.2"
  }
}

store.js

import { useStorage } from "@vueuse/core";

const age = useStorage("age", {
  day: "1",
  month: "0",
  year: new Date().getFullYear(),
  birthdate: ""
});

function useAge() {
  return age;
}

export default useAge;