Moja aplikacja może pobierać dane od użytkownika. Do tego mam różne wejścia. Jednym z moich danych wejściowych jest Date Picker.

 <Form.Item name="Picker" label="date">
        <RangePicker
          showTime={{ format: "HH:mm" }}
          format="YYYY-MM-DD HH:mm"
          onChange={onChange2}
          onOk={onOk}
        />
 </Form.Item>

Problem pojawia się, gdy próbuję uzyskać dostęp do danych po kliknięciu przycisku submit. W konsoli mam wszystkie dane z każdego wejścia, ale z RangePicker, dane nie są ustrukturyzowane i otrzymuję:

Picker: Array[2]
0: Moment
1: Moment

Problem polega na tym, że mogę uzyskać dostęp do tej tablicy i wyświetlać ją na interfejsie użytkownika. Jak to zrobić?

Link do mojej aplikacji: https://codesandbox.io/s/form -methods-ant-design-demo-kbwgk

-1
Asking 31 marzec 2020, 11:10

3 odpowiedzi

Najlepsza odpowiedź

Spróbuj tego

import moment from 'moment'

const onFinish = values => {
    const startDate = moment(values.Picker[0]).format("YYYY-MM-DD HH:mm");
    const endDate = moment(values.Picker[1]).format("YYYY-MM-DD HH:mm");
    console.log(startDate, endDate)
};
2
iamhuynq 31 marzec 2020, 08:25

Ponieważ otrzymujesz to jako tablicę obiektów momentu, spróbuj użyć momentu js do formatowania momentu js zgodnie ze swoimi potrzebami

https://codesandbox.io/s/form-methods-ant-design-demo-sy4uq

function onOk(value) {
    const start = moment(value[0]).format("YYYY-MM-DD HH:mm:ss");
    const end = moment(value[1]).format("YYYY-MM-DD HH:mm:ss");
    console.log(start, end);
}

const onFinish = values => {
    const start = moment(values.Picker[0]).format("YYYY-MM-DD HH:mm:ss");
    const end = moment(values.Picker[1]).format("YYYY-MM-DD HH:mm:ss");
    console.log(start, end)
};
1
vr12 31 marzec 2020, 09:26

Rozumiem, na twoim rangepicker użyj onFinish zamiast onOk

<RangePicker
      showTime={{ format: "HH:mm" }}
      format="YYYY-MM-DD HH:mm"
      onChange={onChange2}
      onFinish={onFinish}
    />

Działa zgodnie z opisem

Naciskasz Ok dwa razy, więc pierwszy onOk nadal nie zawiera drugiej części zakresu. Przepraszam, że nie udzieliłem profesjonalnej odpowiedzi

1
Kasinath PS 31 marzec 2020, 08:50