export default class index extends Component {
constructor() {
super();
this.state = { date: new Date() };
}
componentWillMount() {
this.timer = setInterval(() => { this.setState({ date: new Date() }) }, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
this.timer = null;
}
 
render() {
let t = this.state.date;
let year = t.getFullYear();
let month = t.getMonth() + 1;
let day = t.getDay() + 1;
let hour = ((t.getHours() < 10) ? "0" : "") + t.getHours();
let minutes = ((t.getMinutes() < 10) ? "0" : "") + t.getMinutes();
let ifnoon = ' ' + ((t.getHours() < 12) ? "上午" : "下午") + ' ';
return (
<div className="header">
<Row className="breadcrumb">
<Col span={4} className="breadcrumb-title">首页</Col>
<Col span={20} className="weather">
<span className="date">{year + '/' + month + '/' + day + ifnoon + hour + ':' + minutes}</span>
</Col>
</Row>
</div>
)
}
}

React时间转换为具体的年月日上午下午的更多相关文章

  1. 时间操作(JavaScript版)—页面显示格式:年月日 上午下午 时分秒 星期

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35222531 <!DOCTYPE ...

  2. React实战之将数据库返回的时间转换为几分钟前、几小时前、几天前的形式。

    React实战之将数据库返回的时间转换为几分钟前.几小时前.几天前的形式. 不知道大家的时间格式是什么样子的,我先展示下我这里数据库返回的时间格式 ‘2019-05-05T15:52:19Z’ 是这个 ...

  3. java12小时制的时间转换为24小时制

    Java中将12小时制的时间转换为24小时制的方式如下: import java.text.SimpleDateFormat; import java.util.Date; public class ...

  4. 转自文翼的博客:将本地时间转换为 GMT 时间

    在写 RSS 订阅接口的时候,发现最终输出文章的 RSS 时间(GMT时间),在本地上显示的时间和在服务器上显示的时间不一致. 原因是时区不一致,那么在 JavaScript 中,如何将时间转换为统一 ...

  5. Python中如何把一个UTC时间转换为本地时间

    需求: 将20141126010101格式UTC时间转换为本地时间. 在网上搜了好长时间都没有找到完美的解决方案.有的引用了第三方库,这就需要在现网安装第三方的软件.这个是万万不可的.因为真实环境不一 ...

  6. unix时间转换为datetime\datetime转换为unixtime

    /// <summary> /// unix时间转换为datetime /// </summary> /// <param name="timeStamp&qu ...

  7. UTC时间转换为本地时间

    UTC时间转换为本地时间DATEADD(hour, DATEDIFF(hour,GETUTCDATE(),GETDATE()), OrderDate) <'2015-02-02' DECLARE ...

  8. 【測试工具】一个将Unix时间转换为通用时间的工具

    一个将Unix时间转换为通用时间的工具 演示效果: 点击转换之后变为: 源码: function calctime2(){ var time = window.document.getElementB ...

  9. 生成二维码 加密解密类 TABLE转换成实体、TABLE转换成实体集合(可转换成对象和值类型) COOKIE帮助类 数据类型转换 截取字符串 根据IP获取地点 生成随机字符 UNIX时间转换为DATETIME\DATETIME转换为UNIXTIME 是否包含中文 生成秘钥方式之一 计算某一年 某一周 的起始时间和结束时间

    生成二维码 /// <summary>/// 生成二维码/// </summary>public static class QRcodeUtils{private static ...

  10. 将毫秒时间转换为yyyy-MM-dd HH:mm:ss格式

    /** * 将毫秒时间转换为yyyy-MM-dd HH:mm:ss格式 */ public static String getDateFromTimeMillis(Long timeMillis) { ...

随机推荐

  1. [转]流程自动化机器人(RPA)概念、原理与实践

    [转]流程自动化机器人(RPA)概念.原理与实践 http://blog.sina.com.cn/s/blog_be0833d00102yho9.html 大多数人每天都会使用到一些机器人流程自动化工 ...

  2. Find -mtime 的图解

  3. prometheus告警规则分发服务

    Prometheus告警规则分发服务,根据一致性哈希将规则分发到多个节点,使用多个goroutine处理应用告警,在服务增加时可以增加goroutine,服务减少时降低goroutine数目. 规则下 ...

  4. python批量上传文件到七牛云

    导航 引子 棘手的需求 化繁为简 实战案例 结语 参考 本文首发于智客工坊-<python批量上传文件到七牛云>,感谢您的阅读,预计阅读时长3min. 古之立大事者,不惟有超世之才,亦必有 ...

  5. AIGC的隐私安全问题及隐私保护技术

    作者:京东科技 杨博 ChatGPT 才出现两个月,就已经引起了学术界的关注.微软成为ChatGPT母公司OpenAI的合作伙伴,并确认投资百亿美元.同时,微软正计划将 OpenAI 的技术整合到其产 ...

  6. Vue 中keep-alive组件将会被缓存

    动态包裹哈 <keep-alive> <component :is="comName"></component> </keep-alive ...

  7. 基于.net Core+EF Core项目的搭建(一)

    在我们要使用EF的项目中引用两个包Microsoft.EntityFrameworkCore.SqlServer和Microsoft.EntityFrameworkCore.Tools 我把要使用的E ...

  8. 微信小程序-应用程序生命周期方法

    官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html // app.js App({ onLau ...

  9. 脑科学与人工神经网络ANN的发展历程与最新研究

    本文深入研究了ANN的基本概念.发展背景.应用场景以及与人脑神经网络的关系. 关注TechLead,分享AI全维度知识.作者拥有10+年互联网服务架构.AI产品研发经验.团队管理经验,同济本复旦硕,复 ...

  10. 华为云DTSE助力车卫士架构升级,探索智能出行行业数字化新路径

    本文分享自华为云社区<华为云DTSE助力车卫士技术架构升级,探索智能出行行业数字化新路径>,作者:HuaweiCloudDeveloper. 毫无疑问,在双碳背景以及先进技术的加持下,智能 ...