Javascript 在自定义日历中显示提取的日期

Javascript 在自定义日历中显示提取的日期,javascript,reactjs,react-native,ecmascript-6,react-redux,Javascript,Reactjs,React Native,Ecmascript 6,React Redux,因此,基本上我为我的医生任命应用程序创建了一个自定义日历,如下所示: 它显示当前的星期和日期。 到目前为止,这些时隙是我在平面列表中制作和渲染的静态数组: 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:0

因此,基本上我为我的医生任命应用程序创建了一个自定义日历,如下所示:

它显示当前的星期和日期。 到目前为止,这些时隙是我在平面列表中制作和渲染的静态数组:

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()}
          />
this.state={
时间表:[
{id:1,时间:“上午8:00”},
{id:2,时间:“上午9:00”},
{id:3,时间:“上午10:00”},
{id:4,时间:“上午11:00”},
{id:5,时间:“下午12:00”},
{id:6,时间:“下午1:00”},
{id:7,时间:“下午2:00”},
{id:8,时间:“下午3:00”},
{id:9,时间:“下午4:00”},
{id:10,时间:“下午5:00”},
{id:11,时间:“06:00 pm”},
{id:12,时间:“07:00 pm”},
{id:13,时间:“08:00 pm”}
]
};
以及:
this.renderTimeData(项,索引)}
keyExtractor={(项,索引)=>index.toString()}
/>
因此,我的问题是,我希望以一种考虑到当天日期的方式呈现从获取的数据中提取的时间。例如,以下是数据的日志:

因此,从该属性“date\u start”中,我应该确保日历中的日期匹配,以便显示“9:30” 你知道我该怎么做吗?
如果您想让用户选择推荐您使用的日期和时间,我希望我已经讲清楚了,并感谢您的建议


有了它,您将拥有用于在IOS和Android中呈现日期的本机组件。

您只需使用一个类库来标识对象的日期和时间,如下所示

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)
欲了解更多信息,请查看“时刻”


希望这对你有帮助。请不要怀疑。

我已经呈现了日期,我要做的是从fetch中获取的“date\u start”属性中提取,例如“2020-03-23”“然后在我的日历中把'9:30'放慢你用哪个npm库来选日期?@sv12我没有用任何日期选择器你能再解释一下你的问题吗?@SDushan所以我想替换上午8点、9点、10点。。。从我的数据库中获取数据的时间段。此数据库(如您在日志图片中所看到的)包含一个属性,用于指示appmnt(date\u start)的可用时间。但是格式是这样的“2020-03-22 09:30”,我感兴趣的是显示最后一部分“…9:30”。知道第一部分“2020-03-23”应该决定放置这个时间段的日期(9:30)@AymenAymen这对你有帮助吗?