09 React使用dayjs

npm install dayjs
  1. 在 JavaScript/TypeScript 项目中使用 Day.js:
// 引入 Day.js
import dayjs from 'dayjs';

// 创建一个 Day.js 对象
const now = dayjs();

// 格式化日期
console.log(now.format('YYYY-MM-DD'));

// 添加/减去时间
console.log(now.add(1, 'day').format('YYYY-MM-DD'));

// 获取年份、月份、日期等
console.log(now.year());
console.log(now.month() + 1); // Month starts from 0, so add 1
console.log(now.date());

在 React 项目中引入 Day.js:

import React from 'react';
import dayjs from 'dayjs'; // 引入 Day.js

class MyComponent extends React.Component {
  render() {
    // 在组件中使用 Day.js
    const now = dayjs();
    return (
      <div>
        <p>当前日期:{now.format('YYYY-MM-DD')}</p>
      </div>
    );
  }
}

export default MyComponent;
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是代码实现: ```tsx import React, { useState } from 'react'; import dayjs from 'dayjs'; interface TodoItem { content: string; createdAt: Date; } const TodoList: React.FC = () => { const [inputValue, setInputValue] = useState(''); const [todoList, setTodoList] = useState<TodoItem[]>([]); const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setInputValue(e.target.value); }; const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === 'Enter') { const newTodo = { content: inputValue, createdAt: new Date(), }; setTodoList([...todoList, newTodo]); setInputValue(''); } }; return ( <div> <h1>Todo List</h1> <input type="text" placeholder="Add new todo" value={inputValue} onChange={handleInputChange} onKeyDown={handleInputKeyDown} /> <ul> {todoList.map((todo, index) => ( <li key={index}> {todo.content} <span>{dayjs(todo.createdAt).format('YYYY-MM-DD HH:mm:ss')}</span> </li> ))} </ul> </div> ); }; export default TodoList; ``` 首先定义了一个 `TodoItem` 接口表示待办事项的类型,包含内容和创建时间两个属性。 然后定义了一个 `TodoList` 组件,状态包括输入框的值和待办事项列表。输入框的值和列表都是用 `useState` 来管理的。 在输入框的值发生变化时,通过 `handleInputChange` 函数更新输入框的值。在按下回车键时,会创建一个新的待办事项对象,并将其添加到列表中。同时清空输入框的值。 在渲染列表时,使用 `map` 函数遍历列表中的每个待办事项,渲染出待办事项的内容和创建时间。创建时间使用 `dayjs` 库进行格式化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值