0

I'm using vue-datetime plugin, it appears as if the format option doesn't work as expected, see below:

<datetime type="date" v-model="formData.testDate" input-class="form-control" format="DateTime.DATE_SHORT"></datetime>

It should output as: DD/MM/YYYY but instead outputs as a random string of characters.

enter image description here

1
  • 2
    You've specified a format string of 'DateTime.DATE_SHORT'. Literally that string of 19 characters. So the D gives the date, the a gives the AM, the t gives the time, the e is just passed through... and so on. Commented Jun 11, 2019 at 14:24

4 Answers 4

3

Use datetime format.
For example:

<datetime type="datetime" v-model="datetime13" format="yyyy-MM-dd HH:mm:ss"></datetime>
Sign up to request clarification or add additional context in comments.

Comments

1

From the vue-datetime documentation here, It states that you need to use luxon and weekstart. Make sure you install the two packages like this npm install --save luxon vue-datetime weekstart.

Register your DateTime package globally or locally

Globally

import { Datetime } from 'vue-datetime';
 
Vue.component('datetime', Datetime);

Locally

import { Datetime } from 'vue-datetime';
 
Vue.extend({
  template: '...',
  components: {
    datetime: Datetime
  }
});

This vue-datetime use luxon to set date formats

<template>
<div>
  <datetime type="date"
  v-model="formData.testDate"
  input-class="form-control"
  :format="{ year: 'numeric', month: 'long', day: 'numeric' }">
  </datetime>

  <!-- Or use this -->

  <datetime type="date"
  v-model="formData.testDate"
  input-class="form-control"
  format="dd/MM/yyyy">
  </datetime>

</div>    
</template>

<script>
import { Datetime } from 'vue-datetime';
export default {
    data(){
        return {
            formData: {
                testDate: ''
            }
        }
    },
    components: {
        datetime: Datetime
    }
    
}
</script>

I hope my answer will be helpful

Comments

0

You are trying to apply a format to a string. The format should bind to a variable, the variable needs to reference the wanted format option of the DateTime module of luxon.

<template>
  <div id="app">
    <datetime type="date" v-model="formData.testDate" input-class="form-control" :format="format" />
  </div>
</template>

<script>
import { DateTime } from 'luxon';

export default {
  name: 'app',
  components: {
  },
  data: () => ({
    formData: {
      testDate: '',
    },
    format: DateTime.DATE_SHORT,
  }),
}
</script>

Comments

-1

Use the luxon

npm install --save luxon

and

import { DateTime } from 'luxon';
...
//yourDateFromForm = '2019-06-27T11:06:00.000Z'
console.log(DateTime.fromISO(this.yourDateFromForm).toFormat('DD/MM/YYYY'))

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.