How to change date picker format?

[Philword]

Please help me understand how to set UTC format for a datepicker when use "Date column type plugin" in Vuejs.

Now I have this settings in columnTypes:

import Date from '@revolist/revogrid-column-date'

columnTypes: {
                date: new Date(),
            },

Column settings:

this.columns = [
            { prop: 'issue_date', name: 'Issue date', columnType: 'date', identifier: "date", localization: this.localisation_us, 
            dateAdapter: this.dateAdapter },
]

Params stored in vue data()

data() { 
            return {
            
                      dateAdapter: {
                                      parse(date) {
                                          return moment(date).format('L')
                                      },
                                      format(date) {
                                          return moment(date).format('L')
                                      },
                                  },
                      localisation_us: {
                                      ...(other settings)
                                      placeholder: "mm/dd/yyyy",
                                      locale: "en-US",
                                  },
             }
}

So datapicker itself shows all in a format I want, but when I press "Enter" it displays "YYYY-MM-DD" format, as well as value in vue became same ISO format. And if I copy paste date from excel in format "mm/dd/yyyy" it does not read it as a date, only if I use datepicker.

That is how it works now visually

[Philword]

I also tried the way presented in documentation, but getting the same result

methods: {
        format_date: function() {
                    const DATE_FORMAT_US = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/
                    return {
                        parse(value = "", createDate) {
                            const matches = value.match(DATE_FORMAT_US)
                            if (matches) {
                                return createDate(matches[3], matches[1], matches[2])
                            }
                        },
                        format(date) {
                            return ${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}
                        },
                    };
                }
}

this.columns = [
            { prop: 'issue_date', name: 'Issue date', columnType: 'date', identifier: "date", localization: this.localisation_us, 
            dateAdapter: this.format_date() },
]

[JulienGrv]

please put your code in JavaScript code block using triple backticks otherwise it's unreadable.

[Philword]

@JulienGrv sorry did not know how to do it. Thanks for the link, now I know.

[JulienGrv]

No worries, also add syntax highlighting for Javascript. Example here.

[Philword]

@JulienGrv oh that's cool! good to know such tricks 😎

[JulienGrv]

I am not quite sure if it solves your problem since I have never used the date plugin myself but have you tried to add valueAsDate: true to your column properties? see here and here

[Philword]

@JulienGrv I have tried it, but it returns string something like "Monday, December 25, 2021, 10:30:21 (London time)" and zero options to control the format anyhow 😩

[JulienGrv]

So this what I would do: try to get what you want using duet date picker only then make the necessary changes in the revogrid-column-date plugin and then open a PR so that it gets available for everyone.

[Philword]

Solved the issue by applying cellTemplate prop that resulted me of having masked value using moment() on interface

this.columns = [
      localization: this.localisation_us,
      dateAdapter: this.dateAdapter,
      cellTemplate: (createElement, props) => {
                return createElement('div' , {
                }, props.model[props.prop] ? moment(props.model[props.prop]).format('L') : props.model[props.prop]);
            },
]

and added to my table validation method that automatically reformat any pasted to cell value to ISO format. In result my users can paste absolutely any format of date and my solution would convert it to acceptable by date-plugin.

Convert method:

convertDate(row) {
            if (row.issue_date && row.issue_date !== moment(row.issue_date).format('YYYY-MM-DD')) {
                row.issue_date = moment(row.issue_date).format('YYYY-MM-DD')
            }
        },