date-fns 格式化日期

2019-12-06 10:45:34

参考地址 使用TypeScript日期工具: date-fns 格式化日期

使用TypeScript日期工具: date-fns 格式化日期

安装

引入格式化日期

格式化

封装方法

安装

npm install date-fns --save


// or with yarn

yarn add date-fns


// or with bower

bower install date-fns


引入格式化日期

import * as format from 'date-fns/format';

import * as zh_cn from 'date-fns/locale/zh_cn/index.js';

1

2

格式化

通常情况下只需要直接使用format方法

函数传入三个参数, 第一个参数为必传参数,需要格式化的时间,可以为date, string, number, 第二个参数为日期格式,为可选参数,第三个是可选参数


const date = new Date();

     console.log(date)           //Tue Feb 19 2019 15:57:07 GMT+0800 (中国标准时间)

     console.log(format(date, 'HH:mm')); // 15:57

     console.log(format(date, 'YYYY-MM-DD HH:mm:ss')); //2019-02-19 15:57:07

     console.log(format(date, 'YYYY-MM-DD')); //2019-02-19

    // 不传第二个格式参数的时候.

     console.log(format(date));    //2019-02-19T15:57:07.401+08:00

1

2

3

4

5

6

7

封装方法

为了更适应项目的要求在这里稍作更改

根据需求可以自己更改格式

第一个参数为传入的时间,必传参数,可以为date, string, number, 第二个format为日期格式


private dateFormat = (date: Date, format: string) => {

       return format(date, format, { locale: zh_cn });

   }

1

2

3

使用: 一般用在ajax 向服务的发送param时,格式化获取到的日期时间


startTime = this.dateFormat(startTime, 'YYYY-MM-DD HH:mm:ss')


  • 2020-01-07 10:14:07

    vue强制刷新组件 销毁和重建

    很多时候,通过重置数据将页面重置时,子组件可以提供重置的方法,或者提供props重置自己的状态。但是相对麻烦,那可以使用强制刷新来实现刷新组件。

  • 2020-01-07 10:17:42

    vue钩子函数beforeRouteUpdate没有反应

    由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 `this`

  • 2020-01-08 13:23:24

    vue 中使用eventbus

    为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性

  • 2020-01-08 13:30:30

    vue中eventbus被多次触发(vue中使用eventbus踩过的坑)

    一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B。 然后我就想,这不就是不同组件之间的数据传递问题而已吗?直接用bus 巴士事件来传递数据不就行了吗。于是,我就很愉快地进行了。关于vue中的eventbus的使用,我之前在一篇vue中的数据传递中有提到过。

  • 2020-01-08 22:03:07

    修改MAC系统下默认PHP版本

    今天在使用mac时遇到了一个问题,因为需要composer拉取laravel5.6,但是提示我php版本过低,但是我本人使用的是集成环境MAMP,已经切换了php7.2的版本,这个为什么没有生效呢?经检查是因为composer检测得是mac下环境变量生效的php版本

  • 2020-01-08 23:37:08

    laravel通过图片流返回图片

    我用laravel的字母头像生成框架Laravolt\Avatar生成的base64头像,但我想做个通用但,直接返回图片,我还是根据以往但经验 改写header但返回值为图片返回值,结果返回失败,一堆乱吗,不知道为啥。 后来用了laravel自带但返回图片但方法,结果ok。记录下

  • 2020-01-08 23:45:06

    laravel response 对象一些常用功能点

    通常,我们并不只是从路由动作简单返回字符串和数组,大多数情况下,都会返回一个完整的 Illuminate\Http\Response 实例或 视图。