Javascript Question posted in
A very good W3school tutorial can be found here.

How do I convert a six-digit input to a date format in vue/JavaScript?

Been looking at various solutions for this, but they all seem to be backend-related.
I am looking for a Vue/JavaScript method.
I have a string that contains ID’s. The first 6 digits are date of birth, and the final 4 are a personal number, so an ID will look something like this:

211089-0000

So the first 6 digits represent DD/MM/YYYY.

I have two fields: one where the ID is entered and one that contains date of birth. I would like for the date of birth field to be updated when an ID has been entered, using the first 6 digits and converting them into a date format.

This is how far I have gotten:

I have a computed method that looks like this:

  updateDateOfBirth(){
    if(!this.dateOfBirth && this.userId > 6){
      return this.dateOfBirth = this.userId.substring(0,6)
    }
  }

And I added it as a change event in the userId input form

<template>
  <div>
    <b-form-input v-model="userId" @change="updateDateOfBirth" placeholder="Enter your ID"></b-form-input>
    <div class="mt-2">Value: {{ userId }}</div>
  </div>

  <div>
    <b-form-datepicker id="dateOfBirth" v-model="dateOfBirth" class="mb-2"></b-form-datepicker>
    <p>Value: '{{ dateOfBirth }}'</p>
 </div>
</template>

But I need to convert the 5th and 6th digits into a year format, so 211089 becomes 21/10/1989.

Is it something that can be done by moment.js maybe? I have not been able to find any good examples.

Tags:

2

Answers


  1. 0

    You can use moment js

    <script>
import MC from './components/MC.vue';
import moment from 'moment';

export default {
  name: 'App',
  moment: moment,
  components: {
    MC,
  },
  computed: {
    timestamp: function () {
      return moment('211089', 'DDMMYY').format('DD/MM/YYYY')
    }
  }
};
</script>
    Login or Signup to reply.
  2. 0

    Vue SFC Playground

    I did it in Composition API, just port to Options API, and change ot your date picker format, I used a standard input[type=date].

    1. Use watch instead of @change since you already have a model for the ID input
    2. Get date parts with a regex
    3. Validate against Date
    4. Set the error or datepicker value accordingly:
    <script setup>
import { ref, watch } from 'vue'

const userId = ref('');
const dateOfBirth = ref('');
const error = ref('');

watch(userId, userId => {
  error.value = '';
  const match = userId.match(/^(d{2})(d{2})(d{2})/);
  if(match){
    let [_, d, m, y] = match;
    const curr = new Date().getFullYear().toString().slice(-2);

    y = (y > curr && y < 100 ? 1900 : 2000) + +y;
    const val = `${y}-${m}-${d}`; // make your own format
    // validate date here - convert to date and compare to the format
    const dt = new Date(y, m - 1, d, 0, 0, 0, 0);
    const formatted = `${dt.getFullYear()}-${dt.getMonth() + 1}-${dt.getDate()}`;
    if(formatted !== val){
      error.value = 'Invalid ID date format';
    } else {
      dateOfBirth.value = val;
    } 

  }
});

</script>


<template>
  <div>
    <input v-model="userId" placeholder="Enter your ID">
    <div style="color:red" class="error">{{error}}</div>
    <div class="mt-2">Value: {{ userId }}</div>
  </div>

  <div>
    <input type="date" id="dateOfBirth" v-model="dateOfBirth" class="mb-2">
    <p>Value: '{{ dateOfBirth }}'</p>
 </div>
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search