nhn / tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
http://ui.toast.com/tui-grid/
MIT License
2.42k stars 389 forks source link

Datepicker format bug #1265

Open attyskater opened 3 years ago

attyskater commented 3 years ago

Version

v4.16.1

Development Environment

Chromium

Current Behavior

When you use the datepicker in the grid setting the custom format, for example format: 'dd.MM.yyyy', it shows correctly the text in the box but, if you try to change the date it reverses in display (both in the box and in the picker) month and day. So if you don't look carefully you risk to modify the wrong date. Another change that would be useful is changing the language, I couldn't find anything on the grid documentation. You can find an example here:

https://jsfiddle.net/kgsryu8j/1/

Thanks

Expected Behavior

Set the correct format and language for the datepicker.

js87zz commented 3 years ago

@attyskater

1. reverse the date, month

I checked the issue and will fix it.

2. i18n

There is no way to set i18n on datepicker through grid configuration. If you want to change the language of the tui-data-picker, refer the date-picker API and tutorial.

import TuiDatePicker from 'tui-date-picker';

TuiDatePicker.localeTexts['your lang'] = {
  titles: {
    // days
    DD: // ...
    // daysShort
    D: // ...
  },
  // ...
};

// grid option
const grid = new tui.Grid({
  columns: [
    {
      header: 'DatePicker (Using options)',
      name: 'c2',
      editor: {
        type: 'datePicker',
        options: {
          // set your language
          language: 'customKey',
          format: 'dd/MM/yyyy'
        }
      }
    },
  ]

However, the above way is inconvenient to use and constrained to dynamically change..So we will consider the another option for it. Thanks!

attyskater commented 3 years ago

@js87zz Thanks for your help! I think I will create a new Custom Editor for the date field. If anyone needs it I will post the code.