如何以更易读的方式显示从后端接收到的数据？我将 react 用于前端

Question

Here is my model:

class Festival(models.Model):
    name = models.CharField(max_length=100)
    start_date = models.DateTimeField(blank=True, null=True, default=None)
    end_date = models.DateTimeField(blank=True, null=True, default=None)
    number_of_tickets = models.IntegerField(default=50000)
    location = JSONField(blank=True, null=True)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

    def format_start_date(self):
        return self.start_date.strftime("The Festival will start on: %d %b %Y at: %H:%M:%S")

    def format_end_date(self):
        return self.end_date.strftime("The Festival will end on: %d %b %Y at: %H:%M:%S")

I try to display the output from format_start_date() function using the frontend. how could i do that? At the moment, in List.Item.Meta i access the item.start_date, but it displays the date in an unwanted way. I want it to be more readable, by using format_start_date() function from Festival model. Is it possible? if it isn't, what is the right way to do that: ex: if the date retrieved is "2020-06-12T12:00:00Z", i want to have in description: ""The Festival will start on: 12 06 2020 at: 12:00:00".

const IconText = ({ icon, text }) => (
<Space>
    {React.createElement(icon)}
    {text}
</Space>
);

const Festivals = (props) => {
    return(

        <List
            itemLayout="vertical"
            size="large"
            pagination={{
            onChange: page => {
                console.log(page);
            },
            pageSize: 3,
            }}
            dataSource={props.data}
            footer={
            <div>
                <b>ant design</b> footer part
            </div>
            }
            renderItem={item => (
            <List.Item
                key={item.title}
                actions={[
                <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                ]}
                extra={
                <img
                    width={272}
                    alt="logo"
                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
                }
            >
                <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href={item.href}>{item.name}</a>}
                description={item.start_date}

                />
                {item.content}
            </List.Item>
            )}
        />
    )
}

export default Festivals;

I also tried using the function toLocaleDataString() from the Festival.js file, but it doesn't work.

Answer 1

You can use momentjs for that in the front end.

To accomplish your goal you need to call moment(YOUR_DATE).format("MM DD YYYY [at] hh:mm") after installing the moment library.