180916-ReactJs之日期转换

常见的日期与时间戳之间的相互转换,记录下借助插件momoent来实现

1. 使用姿势

使用前,有那么几步需要走

安装依赖

1
sudo npm install --save moment

引入依赖

1
import moment from 'moment';

开始使用

1
2
// 将时间戳(ms),转换为指定格式的日期
moment(Time).format("YYYY-MM-DD HH:mm:ss")

2. 常用说明

a. 日期格式化

1
2
3
4
5
moment().format('MMMM Do YYYY, h:mm:ss a'); // 九月 16日 2018, 8:54:12 晚上
moment().format('dddd'); // 星期日
moment().format("MMM Do YY"); // 9月 16日 18
moment().format('YYYY [escaped] YYYY'); // 2018 escaped 2018
moment().format(); // 2018-09-16T20:54:12+08:00

b. 相对时间

1
2
3
4
5
moment("20111031", "YYYYMMDD").fromNow(); // 7 年前
moment("20120620", "YYYYMMDD").fromNow(); // 6 年前
moment().startOf('day').fromNow(); // 21 小时前
moment().endOf('day').fromNow(); // 3 小时内
moment().startOf('hour').fromNow(); // 1 小时前

c. 日历时间

1
2
3
4
5
6
7
8
moment().subtract(10, 'days').calendar(); // 2018年9月6日
moment().subtract(6, 'days').calendar(); // 本周一晚上8点55
moment().subtract(3, 'days').calendar(); // 本周四晚上8点55
moment().subtract(1, 'days').calendar(); // 昨天晚上8点55分
moment().calendar(); // 今天晚上8点55分
moment().add(1, 'days').calendar(); // 明天晚上8点55分
moment().add(3, 'days').calendar(); // 下周三晚上8点55
moment().add(10, 'days').calendar(); // 2018年9月26日

d. 多语言

1
2
3
4
5
6
7
8
moment().format('L');    // 2018-09-16
moment().format('l'); // 2018-09-16
moment().format('LL'); // 2018年9月16日
moment().format('ll'); // 2018年9月16日
moment().format('LLL'); // 2018年9月16日晚上8点55分
moment().format('lll'); // 2018年9月16日晚上8点55分
moment().format('LLLL'); // 2018年9月16日星期日晚上8点55分
moment().format('llll'); // 2018年9月16日星期日晚上8点55分

II. 其他

0. 相关

1. 一灰灰Bloghttps://liuyueyi.github.io/hexblog

一灰灰的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛

2. 声明

尽信书则不如,已上内容,纯属一家之言,因个人能力有限,难免有疏漏和错误之处,如发现bug或者有更好的建议,欢迎批评指正,不吝感激

3. 扫描关注

一灰灰blog

QrCode

知识星球

goals

180915-ReactJs之Fix:uncaught at check call argument [object Promise] is not a function

Fix uncaught at check call: argument [object Promise] is not a function

在使用ANTD的魔板套前端页面的时候,遇到了一个诡异的问题,记录下

在modal中的写法如下

1
2
3
4
* addGroup({payload}, {call, put}) {
yield call(addGroup(payload));
console.log("add group over!");
},

在执行时,控制台报错

1
uncaught at check call: argument [object Promise] is not a function

主要原因在 yield call(addGroup(payload)); 的使用姿势问题,对于需要传递参数的去哪个,不能直接这么干,应该改为

1
yield call(addGroup, payload);

II. 其他

1. 一灰灰Bloghttps://liuyueyi.github.io/hexblog

一灰灰的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛

2. 声明

尽信书则不如,已上内容,纯属一家之言,因个人能力有限,难免有疏漏和错误之处,如发现bug或者有更好的建议,欢迎批评指正,不吝感激

3. 扫描关注

一灰灰blog

QrCode

知识星球

goals

180810-单页面Vue打包子页面提示404问题记录

网上下了个Vue项目,打包为dist之后,扔到ngxin服务器上运行,正常连接访问没啥问题,但是刷新之后提示404

记录下修复过程

CSS图片点击拷贝

I. CSS图片点击拷贝

点击实现文本or图片的复制, 主要利用 document.execCommand('Copy')来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
function copy2board()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}

function copyimg(e) {
var range = document.createRange();
range.selectNode(e); //selectable为下面页面中DIV中的id
window.getSelection().addRange(range);
document.execCommand("Copy");
alert("复制ok");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copy2board()" value="点击复制代码" />



<img src="http://a.hiphotos.baidu.com/image/pic/item/8326cffc1e178a82112604dffa03738da977e8b3.jpg" width=200 height=200 onclick="copyimg(this)"></img>

II. 其他

个人博客: 一灰灰Blog

基于hexo + github pages搭建的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛

声明

尽信书则不如,已上内容,纯属一家之言,因本人能力一般,见识有限,如发现bug或者有更好的建议,随时欢迎批评指正

扫描关注

QrCode

Css实战训练之图片点击放大

Css实战训练之图片点击放大

I. 背景

非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片

那么这个功能是怎么实现的呢? 正好学习了下css的基础知识,现在可以来实际的操作一把

Css学习手册之基本篇

Css学习手册之基本篇

每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时,又得百度一下该怎么用,低效且不愉快,强制自己好好的学习下基本功

Chrome插件之DomToImage实现

I. 说明

有些时候,看到一些网页的信息时,想分享给小伙伴,一般直接用截图工具来做,但是当分享的内容比较长时,截图就比较蛋疼了,所以想着做了这么个插件

可以将网页中任意一个dom结构,渲染为图片

JQuery 实战笔记一

jquery实战笔记

写前端控制台中,实际遇到的不会的,通过查询解决的记录,汇总记录下来,一期主要包括:

  • 标签隐藏显示
  • 时间戳转换
  • radio单选框选中获取
  • 动态修改placeholder值
  • 判断字符串是否为数字类型
  • tab标签页实现
  • 标签点击事件
  • jquery跳转链接
  • jquery 修改图片url
  • 图片加边框
  • 实现一个可检索的table
  • 表格内容固定
  • input回车响应
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×