在自定义日历中显示获取的日期 React native答案

【问题标题】：Displaying Fetched date in a custom calendar React native在自定义日历中显示获取的日期 React native
【发布时间】：2020-03-23 13:44:22
【问题描述】：

所以基本上我为我的医生约会应用程序创建了一个自定义日历，如下所示：

它显示当前星期和日期。到目前为止，这些时间段是我制作并呈现在平面列表中的静态数组：

this.state = {
      timeList: [
        { id: 1, time: "08:00 am" },
        { id: 2, time: "09:00 am" },
        { id: 3, time: "10:00 am" },
        { id: 4, time: "11:00 am" },
        { id: 5, time: "12:00 pm" },
        { id: 6, time: "01:00 pm" },
        { id: 7, time: "02:00 pm" },
        { id: 8, time: "03:00 pm" },
        { id: 9, time: "04:00 pm" },
        { id: 10, time: "05:00 pm" },
        { id: 11, time: "06:00 pm" },
        { id: 12, time: "07:00 pm" },
        { id: 13, time: "08:00 pm" }
      ]
    };
and:
<FlatList
            data={this.state.timeList}
            renderItem={({ item, index }) => this.renderTimeData(item, index)}
            keyExtractor={(item, index) => index.toString()}
          />

所以我的问题是我想以一种考虑到日期的方式从获取的数据中呈现时间。例如，这里是数据日志：

所以从那个属性“date_start”我应该确保日期在我的日历中匹配，这样我就可以显示“9:30” 知道我该如何处理吗？我希望我已经足够清楚了，谢谢你的建议

【问题讨论】：

你用什么 npm 库来做日期选择器？
@sv12 我没有使用任何日期选择器
你能解释一下你的问题吗？
@SDushan 所以我想用我的数据库中的数据替换上午 8 点、上午 9 点、上午 10 点......时间段。这个 db（如您在日志图片中看到的）包含一个属性，用于指示 appmnt（date_start）的可用时间。但格式是这样的“2020-03-22 09:30”，我只想显示最后一部分“...9:30”。知道第一部分“2020-03-23”应该确定放置这个时间段的日期(9:30)

标签： javascript reactjs react-native ecmascript-6 react-redux

【解决方案1】：

您可以简单地使用 Moment 之类的库来识别对象的日期和时间，如下所示，

let date = moment("2020-03-23 09:30").format('YYYY-MM-DD');
console.log(date)

let time = moment("2020-03-23 09:30").format('h:mm A');
console.log(time)

欲了解更多信息，请查看 Moment 的String format。

希望这对您有所帮助。如有疑问，请随意。

【讨论】：

@AymenAymen 这对您有帮助吗？

【解决方案2】：

如果您想让用户选择一天的日期和时间，official react-native documentation 建议您使用DateTimePicker

有了这个，你将拥有在 IOS 和 Android 中呈现日期的本机组件。

【讨论】：

我已经渲染了日期，我想做的是从我从 fetch 中获得的 'date_start' 属性，提取例如 ''2020-03-23' 并进入我的日历放入“9:30”时段