CODEWITHSUNDEEP
javascriptvue.jsdatepickervuejs3
tony
tony

Reputation: 199

Datepicker vue3 put the date in the correct format

I am using for the date "datepicker", I cannot get it back in the correct format. I have tried several different ways with the documentation, but still cannot. Thank you for help. this is how I get the date : Sat Jun 12 2021 00:00:00 GMT+0200 (heure d’été d’Europe centrale)

<template>
  <div>
    <div>
      <datepicker v-model="date"  lang="fr" :locale="date-fns/locale/fr"  type="date" :format="dd-MM-YYYY" :lowerLimit="Date.now()"></datepicker>
                                        
    </div>
  </div>
<template>

<script>
import Datepicker from 'vue3-datepicker'
import { ref } from 'vue'
//import { add } from 'date-fns'
const date = ref(new Date())
const dateFrom = ref(new Date())

export default {
    name:'RechercheDate',
    components: { 
        Datepicker
    },
    data(){
        return{
          date:""
        }
    }
}
</script>

Upvotes: 1

Views: 11940

Answers (1)

Mirko t.
Mirko t.

Reputation: 491

I guess you did some small mistakes here:

Here is what your code somehow should look alike:

<template>
  <div>
    <div>
      <datepicker v-model="date" lang="fr" locale="date-fns/locale/fr" 
 format="dd-MM-YYYY" type="date" :lowerLimit="new Date()"></datepicker>
                                        
    </div>
  </div>
<template>

<script>
import Datepicker from 'vue3-datepicker'
import { ref } from 'vue'

export default {
    name:'RechercheDate',
    components: { 
        Datepicker
    },
    setup() {
      const date = ref(new Date());
 
      return {
         date,
      }
    }
}
</script>

What did I change?

I put the date ref into an Setup function and return it, thus you do not need the data attribute anymore. you did initalize a dateFormat, but didn't use it, If you want to you need to change format to :format="dateFormat" and add dateFormat to your setup Function (probably no ref because it won't change) and return it too.

Also. the : infront of attributes are only needed if you want to execute Javascript in it (or use variables)

Update: After checking for the doc I also need to confirm what Boussadjra Brahim already said, the format Property is called inputFormat

Upvotes: 4

Related Questions