md-datepicker won't load dateFormat

[ehystiv]

Steps to reproduce

in my main.js, I set Vue.material.locale.dateFormat = 'dd/MM/yyyy'

Vue.material = {
  ...Vue.material,
  locale: {
    ...Vue.material.locale,
    dateFormat: 'dd/MM/yyyy',

    firstDayOfAWeek: 1,

    days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
    shortDays: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
    shortedDays: ['D', 'L', 'M', 'M', 'G', 'V', 'S'],

    months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
    shortMonths: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
    shorterMonths: ['G', 'F', 'M', 'A', 'M', 'G', 'L', 'A', 'S', 'O', 'N', 'D'],

    startYear: 1900,
    endYear: 2099
  }
}

Which browser?

All

What is expected?

md-datepicker showing date like my format

What is actually happening?

md-datepicker show date like default format

[dragosct]

Hi, @StefanoBichicchi! Here https://vuematerial.io/components/datepicker#datepicker you will find the correct way to set the datepicker format.

Regards, Dragos

[ehystiv]

I've copied exactly the example from this page, but it doesn't work

<script>
import { required, sameAs, maxLength, minLength, email } from 'vuelidate/lib/validators'

export default {
    name: "Signup",
    data: () => ({
        userData: {
            email: null,
            emailConf: null,
            telefono: null,
            password: null,
            passwordConf: null,
            anagrafica: {
                nome: null,
                cognome: null,
                data_nascita: null,
                residenza: {
                    via: null,
                    citta: null,
                    provincia: null
                },
                codice_fiscale: null,
                sesso: null
            }
        },
        consent: false,
        sending: false,
        showAlertCons: false,
        mdDuration: 4000,
        anErrror: false
    }),
    computed: {
      firstDayOfAWeek: {
        get () {
          return this.$material.locale.firstDayOfAWeek
        },
        set (val) {
          this.$material.locale.firstDayOfAWeek = val
        }
      },
      dateFormat: {
        get () {
          return this.$material.locale.dateFormat
        },
        set (val) {
          this.$material.locale.dateFormat = val
        }
      }
    },
    validations: {
        userData: {
            email: {
                required,
                email
            },
            emailConf: {
                required,
                email,
                sameAs: sameAs("email")
            },
            password: {
                required
            },
            passwordConf: {
                required,
                sameAs: sameAs("password")
            },
            anagrafica: {
                nome: {
                    required
                },
                cognome: {
                    required
                },
                data_nascita: {
                    required,
                    correct: function(v) {
                        // TO-DO
                    } 
                },
                residenza: {
                    via: {
                        required
                    },
                    citta: {
                        required
                    },
                    provincia: {
                        required
                    }
                },
                sesso: {
                    required
                },
                codice_fiscale: {
                    required,
                    minLength: minLength(16),
                    maxLength: maxLength(16)
                }
            }
        }
    },
    methods: {

        send() {
            this.$v.$touch();

            if(this.$v.$invalid){
                this.anErrror = true;
                return;
            }

            if(!this.consent){
                this.showAlertCons = true;
                return;
            }

            this.sending = true;
        },

        getValidationClass (fieldName) {
            let field = this.$v.userData[fieldName];

            if(!field)
                field = this.$v.userData.anagrafica[fieldName];

            if(!field)
                field = this.$v.userData.anagrafica.residenza[fieldName];

            if (field) {
                return {
                    'md-invalid': field.$invalid && field.$dirty
                }
            }
      },

      log() {
          console.log(this.dateFormat)
      }
    }
}
</script>

[dragosct]

Hi, @StefanoBichicchi! Just put Vue.material.locale.dateFormat = 'dd/MM/yyyy' in your main.js without any other codes in your component file after you import the vuematerial and it will work. I tested and it's working.

[ehystiv]

I've already done, but it doesn't work...

import Vue from 'vue';

import VueRouter from 'vue-router';

import VueMaterial from 'vue-material';
import Vuelidate from 'vuelidate';

import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';

import App from './App';
import Home from './Home/Home';
import Signup from './Signup/Signup';

Vue.use(VueRouter);
Vue.use(VueMaterial);
Vue.use(Vuelidate);

Vue.config.productionTip = false;

Vue.material = {
  ...Vue.material,
  locale: {
    ...Vue.material.locale,
    dateFormat: 'dd/MM/yyyy',

    firstDayOfAWeek: 1,

    days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
    shortDays: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
    shortedDays: ['D', 'L', 'M', 'M', 'G', 'V', 'S'],

    months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
    shortMonths: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
    shorterMonths: ['G', 'F', 'M', 'A', 'M', 'G', 'L', 'A', 'S', 'O', 'N', 'D'],

    startYear: 1900,
    endYear: 2099
  }
}

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {path: '/', component: Home},
    {path: '/signup', component: Signup}
  ]
});

new Vue({
  router, 
  render: h => h(App),
}).$mount('#app')

any errors in my code?