search

muhimasri / b-editable-table

A Bootstrap Vue editable table for editing cells using built-in Bootstrap form elements
MIT License
33 stars 11 forks source link

Passing Date Format to Date Input? #11

Closed Ajility97 closed 2 years ago

Ajility97 commented 3 years ago

https://bootstrap-vue.org/docs/components/form-datepicker#date-string-format

How can date-string-format option be passed to the date input using fields? For example, I have a lot of columns so I'd like to use the short date format below in the field below:

  fields: [
    {
      key: 'date_follow_up', label: 'Follow Up On', type: 'date', editable: true, 
    }
  ],

Using b-form-datepicker directly, it would look like this:

<b-form-datepicker
      ...
      :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
/>
muhimasri commented 3 years ago

All form element's attributes and properties are supported by passing them directly into the field object. So in your case, you can pass the date format as follows:

{ 
  key: 'date_follow_up', label: 'Follow Up On', type: 'date', editable: true,  locale: "en",
  "date-format-options":  { year: 'numeric', month: 'numeric', day: 'numeric' }
}

Here is a working example on CodeSandbox

Cheers