0

I'm developing an application in React.Js.

When I select and save the dates using react-date-picker, saved well in the database. But when I show them with react-bootstrap-table-next and react-bootstrap/Table, don't show correctly.

enter image description here

For react-date-picker:

...
<DatePicker onChange={d => setDt(d)} value={date} />

For react-bootstrap-table-next:

<BootstrapTable
  bootstrap4
  keyField="id"
  data={data}
  columns={columns}
  pagination={paginationFactory(options)}
 />

For react-bootstrap/Table:

{
  array.map(item => {
    return <tr>
             <td>{item.id}</td>
             <td>{item.date}</td>
             <td>{item.hour}</td>
           </tr>

  })
}

It seems to be a problem in how it reads the date value.

How can I solve this, suggestions?

bonnegnu
  • 175
  • 3
  • 12
  • Have you checked the locale information between the database and the client? You may need to perform a datetime conversion if they differ? – UncountedBrute Jan 15 '21 at 17:35
  • Hello @UncountedBrute! Thank you for your suggestion. Yes, it could be that. How do I do it? – bonnegnu Jan 15 '21 at 17:43
  • You could try [moment.js](https://www.npmjs.com/package/moment/) – Mike K Jan 15 '21 at 23:04
  • Hello @Mike K! Thanks for your answer. How do I implement it? – bonnegnu Jan 15 '21 at 23:08
  • 1
    @bonnegnu there are loads of ways of checking timezones, it depends on factors like what OS you are running and what distribution. Best thing to do, is check what timezone your PC is running, then remote into the server where the database is running. You then need to find out how to get the timezone based on what OS/Distribution that server is running. Once you know that information, you'll be able to come up with a plan on how best to correct the difference. – UncountedBrute Jan 16 '21 at 12:20

1 Answers1

0

The solution I found temporarily (maybe that's the way to do it), was to use moment, as suggested in How to use the moment library in React Bootstrap table's column definition?

I have to format the cell:

moment(cell).format("YYYY-MM-DD")

EDIT: use dayjs

bonnegnu
  • 175
  • 3
  • 12