使用日期对象格式化数组,并在下拉菜单中显示它们

问题描述 投票:0回答:2

所以我有一个api调用,它给了我一系列对象。在这些对象中,我有一个日期/时间戳,其格式设置为ISO(如果我输入错误,请更正我)。

下面的代码就在我的render()之后

const pickerItems = this.props.currentData.trips.map(trip => {
    return { 
        label: trip.start.timestamp, 
        value: trip.tripId 
    };
  });

  console.log(pickerItems);

控制台日志返回以下内容:

Array [
  Object {
    "label": "2019-05-24T10:12:01.123Z",
    "value": "1C8EB4E0888640ED9211CB8C563542D0",
  },
Object {
    "label": "2019-05-24T10:12:01.123Z",
    "value": "1C8EB4E0888640ED9211CB8C563542D0",
  },
]

我的下拉列表组件:

<RNPickerSelect items={pickerItems} />

我将如何以最简单的方式:

  • 创建一个下拉列表,其中所有标签(作为项目向下发送)是当前日期,格式为:2019-05-24,后跟确切时间。

谢谢,埃里克

javascript reactjs react-native
2个回答
0
投票

使用react-native中的Picker组件和moment库进行格式化的类似方法:

<Picker
  selectedValue={this.state.selectedDate}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({selectedDate: itemValue})
  }>
  {props.items.map(item => <Picker.Item label={moment(item).format('YYYY-mm-dd hh:mm:ss')} value={item} />
</Picker>

0
投票

映射数组时,应将ISO日期更改为正常日期,并像下面那样使用它:

const pickerItems = this.props.currentData.trips.map(trip => {
      const someDay= new Date(trip.start.timestamp)
        return { 
            label: `${someDay.geyFullYear()}-{someDay.getMonth + 1}-{someDay.getDate()}`, 
            value: trip.tripId 
        };
      });

      console.log(pickerItems);
© www.soinside.com 2019 - 2024. All rights reserved.