0

I want to use the date picker component with localization support. I created this date picker example

HTML:

<div id="app">
  <v-app id="inspire">
  <v-menu 
    :value="showDatePicker" 
    max-width="290px"
  >
    <template v-slot:activator="{ on }">
      <v-text-field 
        :value="formattedDate"
        readonly 
        clearable
        label="Date"
        v-on="on"
        :rules="rules"
        :required="true"
        @input="selectDate"
      ></v-text-field>
    </template>
    <v-date-picker 
      :value="date" 
      :locale="currentLocale"
      no-title
      @input="selectDate"
    />
  </v-menu>
  </v-app>
</div>

JS:

new Vue({
  el: '#app',
  data: () => ({
    showDatePicker: false,
    date: '',
    currentLocale: 'de',
    rules: [
      value => this.validateDate(value) || 'Invalid date'
    ]
  }),
  computed: {
     formattedDate: function () {
       const formattedDate = this.date

       // !! format the date based on this.currentLocale !!

       return formattedDate
     }
  },
  methods: {
    selectDate: function(newDate) {
      this.showDatePicker = false;
      this.date = newDate;
    },
    validateDate: function(date){
      // !! validate iso date here !!

      return true
    }
  }
})

https://codepen.io/anon/pen/ydZqxd?editors=1010

The date picker component itself returns the date with iso format. I want to use it but I also want to display the locale date format for the user. Things get tricky because I want to validate the date with the iso format but the textfield uses the formatted date as its value. So when it comes to the validation the textfield passes in the formatted date but this is the wrong value. It should be the iso date.

It would be cool to have something like display/value although it would make no sense for textfields...

Is there a way to pass in the iso format to the validation rules and only display the formatted date?

2
  • Can you not run things through Date? new Date(arbitrary valid date string).toISOString() will give you a guaranteed valid ISO date, and thatsamedateobject.toLocaleString() will give you the localized version. Jul 10, 2019 at 21:13
  • no because it passes in the locale date instead of passing in the "real" date string
    – Question3r
    Jul 11, 2019 at 4:31

1 Answer 1

1
+50

U can do it easy. Just follow this code:

new Vue({
    el: '#app',
    data: (vm) => ({
        showDatePicker: false,
        date: '',
        currentLocale: 'de',
        rules: [
            value => vm.validateDate(value) || 'Invalid date'
        ]
    }),
    computed: {
        formattedDate: function () {
            // !! format the date based on this.currentLocale !!
            let formattedDate = "";
            let options = {
                weekday: "short",
                year: "numeric",
                month: "2-digit",
                day: "numeric"
            }
            if (this.date) {
                formattedDate = new Date(this.date).toLocaleDateString(this.currentLocale, options)
            }
            return formattedDate
        }
    },
    methods: {
        selectDate: function (newDate) {
            this.showDatePicker = false;
            this.date = newDate;
        },
        validateDate: function (date) {
            // !! validate iso date here !!

            return true
        }
    }
});

1) More about options and toLocaleDateString function : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

2) Also I fixed this point: value => this.validateDate(value) || 'Invalid date' to value => vm.validateDate(value) || 'Invalid date', because this not working in 'data', because you need passing vuejs instance

3) U can add preg match for this line if (this.date) for check to correctly date

Test it: https://codepen.io/anon/pen/dBEjor?editors=1010

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.