• 技术文章 >web前端 >js教程

    react中monent如何获取日期?

    青灯夜游青灯夜游2020-11-30 14:18:05原创1277

    方法:1、使用“npm install moment --save”安装moment;2、在组件中使用import语句引入moment;3、使用monent提供的方法来获取日期,例“moment().format();”获取当前时间。

    本教程操作环境:windows7系统、React16版,该方法适用于所有品牌电脑。

    相关推荐:《React视频教程

    在写项目时,我们有时需要获取当前时间,这时我们除了用之前 js 获取日期的方式之外,也可以使用 moment 来获取日期。

    1、安装 moment

    npm install moment --save

    2、引入 moment

    import moment from 'moment'

    3、使用 moment

    获取当前时间:

    //获取 当前时间
    moment().format('YYYY-MM-DD HH:mm:ss');   //2020-08-25 10:23:59
    
    //获取年份
    moment().year();       //2020
    moment().get('year');  //2020
    
    //获取月份(0:一月份  11: 12月份 )
    moment().month();       //7
    moment().get('month');  //7
    
    //获取一个月的某一天
    moment().date();       //25
    moment().get('date');  //25
    
    //获取小时
    moment().hours();          //11
    moment().get('hours');     //11
    
    //获取分钟
    moment().minutes();        //11
    moment().get('minutes');   //11
    
    //获取秒数
    moment().seconds();        //17
    moment().get('seconds');   //17
    
    //获取 今天星期几
    moment().format('dddd');     //Tuesday
    moment().format('d');        //2
    
    moment().day();              //2(0~6 分别代表周日到周六)
    moment().weekday();          //2(0~6 分别代表周日到周六)
    moment().isoWeekday();       //2(1~7 分别代表周一到周日)
    moment().get('date');        //2
    moment().get('weekday');     //2
    moment().get('isoWeekday');  //2

    设置时间:

    //设置年份
    moment().year(2019);
    moment().set('year', 2019);
    moment().set({year: 2019});
    
    //设置月份
    //0~11, 0: 1月份, 11: 12月份
    moment().month(8);        
    moment().set('month', 8);
    
    //设置  某个月中的某一天  某个周中的某一天  小时  分钟  秒数  同上,这里就不写了

    格式化指定时间:

    //格式化指定时间
    moment(time).format('YYYY-MM-DD');

    时间差:

    now_time.diff(start_time,"hour");      //小时数
    now_time.diff(start_time,"minute");    //分钟数
    now_time.diff(start_time,"second");    //现在和初始时间相差的秒数
    now_time.diff(start_time, 'months');   //月数
    now_time.diff(start_time, 'weeks');    //周数
    now_time.diff(start_time, 'days');     //天数

    相对时间:

    //add       加时间    
    //subtract  减时间
    moment().subtract(10, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-15 10:51:48
    moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-19 10:51:48
    moment().subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-22 10:51:48
    moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');  //前一天:2020-08-24 10:51:48
    moment().format('YYYY-MM-DD HH:mm:ss');               //当前时间:2020-08-25 10:51:48
    moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss');       //后一天:2020-08-26 10:51:48
    moment().add(3, 'days').format('YYYY-MM-DD HH:mm:ss');       //2020-08-28 10:51:48
    moment().add(10, 'days').format('YYYY-MM-DD HH:mm:ss');      //2020-09-04 10:51:48
    
    moment().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss');  //前一年:
    moment().add(1, 'year').format('YYYY-MM-DD HH:mm:ss');       //后一年:
    
    moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss');  //前一小时:
    moment().add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');       //后一小时:
    // startOf 设置为起始时间 
    moment("20111031", "YYYYMMDD").fromNow();    //9 years ago
    moment().startOf('day').fromNow();           //11 hours ago
    moment().startOf('hour').fromNow();          //an hour ago
    moment().endOf('day').fromNow();             //in 13 hours
    moment().endOf('hour').fromNow();            //in 15 minutes
    
    //年初
    moment().startOf('year').format('YYYY-MM-DD HH:mm:ss');   //2020-01-01 00:00:00
    //月初
    moment().startOf('month').format('YYYY-MM-DD HH:mm:ss');  //2020-08-01 00:00:00
    //日初
    moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');    //2020-08-25 00:00:00
    //周初  本周第一天(周日)
    moment().startOf('week').format('YYYY-MM-DD HH:mm:ss');   //2020-08-23 00:00:00
    //本周周一初
    moment().startOf('isoWeek').format('YYYY-MM-DD HH:mm:ss');  //2020-08-24 00:00:00

    更多编程相关知识,请访问:编程视频课程!!

    以上就是react中monent如何获取日期?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:react monent 获取日期
    上一篇:怎么用cdn引用jquery 下一篇:jquery是什么意思呀
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• react组件有过哪些性能优化• react中图片怎么引用• react组件几种声明方式是什么• react遵循的原则是什么
    1/1

    PHP中文网