Vue2-datepicker: Custom format function

[saintplay]

Sometimes you need more control when formatting the Dates.

<date-picker v-model="time" :format="customFormatter"></date-picker>

methods: {
  customFormatter(date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a');
  }
}

This functionality will be supported somehow? are PRs welcome?

[dougstjohn]

Did you find another solution for formatting the output date?

[saintplay]

No, I didn't. I checked the source code, this needs a PR.

Personally I'm using other solution like vuejs-datepicker, in the meantime

[dougstjohn]

Agreed. I ended up using @change and calling a method to do the formatting. There may be a cleaner way that doesn't require passing the variable name.

<date-picker v-model="endDate" @change="dateChange('endDate')"></date-picker>

methods: {
    dateChange(variable) {
        this[variable] = moment(this[variable]).format('MM-DD-YYYY');
    }
}

[mengxiong10]

PRs welcome

[mengxiong10]

since v3.7.0. Pass to formatter an object.

<date-picker v-model="value" :formatter="myFormat" />

  data () {
    return {
      myFormat: {
       // Date to String
        stringify: (date) => {
          return date ? moment(date).format('LL') : null
        },
        // String to Date
        parse: (value) => {
          return value ? moment(value, 'LL').toDate() : null
        }
      }
    }
  }

---

Old version:
V1.9.5 Added.
Since this prop 'format' affects the input function , I added the prop 'custom-formatter'.

<date-picker v-model="time" :custom-formatter="customFormatter"></date-picker>

methods: {
  customFormatter(date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a');
  }
}

[dougstjohn]

Is this assigning the customFormatter() return value to the model?

[mengxiong10]

return a String to dispaly

[lan8086]

hello there,
I'm new to vue, need to bind a date object to this so that it sends to server as ISO date string-YYYY-MM-DD, but display format in local culture. could you please suggest the best way to achieve this? i tried to use the custom-formatter, doesn't seem to work.
thanks,

[mengxiong10]

@lan8086 The default bind value is a Date Object. You can set format (YYYY/MM/DD) to format the display. You can easy to set local format in v3.0.0 soon.

[mgreenw]

@mengxiong10 Is there currently a way to provide a custom format function since the custom-formatter prop was removed in v2?

[mengxiong10]

since v2.9.0. Pass to format an object.

<date-picker v-model="value" :format="myFormat" />

  data () {
    return {
      myFormat: {
       // Date to String
        stringify: (date) => {
          return date ? moment(date).format('LL') : null
        },
        // String to Date
        parse: (value) => {
          return value ? moment(value, 'LL').toDate() : null
        }
      }
    }
  }

[mgreenw]

@mengxiong10 thanks!

[hikayatz]

V1.9.5 Added.
Since this prop 'format' affects the input function , I added the prop 'custom-formatter'.

<date-picker v-model="time" :custom-formatter="customFormatter"></date-picker>

methods: {
  customFormatter(date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a');
  }
}

I
try using version 3.8.2 this props not working

[mengxiong10]

@hikayatz the latest version is formatter

<date-picker v-model="value" :formatter="myFormat" />

  data () {
    return {
      myFormat: {
       // Date to String
        stringify: (date) => {
          return date ? moment(date).format(''MMMM Do YYYY, h:mm:ss a'') : null
        },
        // String to Date
        parse: (value) => {
          return value ? moment(value, ''MMMM Do YYYY, h:mm:ss a'').toDate() : null
        }
      }
    }
  }