前端获取当前日期---------------年月日//时分秒

当前时间,先分组匹配,以数组下标索引匹配定义的汉字进行替换

处理日期方法

/* 日期格式化 */
const formatTime = function formatTime(time, template) {
    if (typeof time !== "string") {
        time = new Date().toLocaleString('zh-CN', { hour12: false });
    }
    if (typeof template !== "string") {
        template = "{0}年{1}月{2}日 {3}:{4}:{5}";
    }
    let arr = [];
    if (/^\d{8}$/.test(time)) {
        let [, $1, $2, $3] = /^(\d{4})(\d{2})(\d{2})$/.exec(time);
        arr.push($1, $2, $3);
    } else {
        arr = time.match(/\d+/g);
    }
    return template.replace(/\{(\d+)\}/g, (_, $1) => {
        let item = arr[$1] || "00";
        if (item.length < 2) item = "0" + item;
        return item;
 

  导入定义的工具方法

import _ from '../assets/utils'

import React, { useMemo, useEffect } from 'react'
import timg from '../assets/images/timg.jpg'
import './HomeHead.less'
import { connect } from 'react-redux'
import action from '../store/action'
import { useNavigate } from 'react-router-dom'

const HomeHead = function HomeHead(props) {
  const navigate = useNavigate()

  /* 计算时间中的月和日 */
  let { today, info, queryUserInfoAsync } = props
  let time = useMemo(() => {
    //通过正则取数字
    let [, year, month, day] = today.match(/^\d{0}(\d{4})(\d{2})(\d{2})$/),
      area = [
        '零','一', '二', '三', '四','五','六','七','八','九','十','十一','十二',
      ]
    return {
      year: +year + '年',
      month: area[+month] + '月',
      day: +day + '日',
    }
  }, [today])

  // 第一次渲染完:如果info中没有信息,我们尝试派发一次,获取到登陆者信息
  useEffect(() => {
    if (!info) {
      queryUserInfoAsync()
    }
  }, [])

  return (
    <header className="home-head-box">
      {/* 时间,标题 */}
      <div className="info">
        <div className="time">
          <span>{time.year}</span>
          <div className="month_day">
            <span>{time.month}</span>
            <span>{time.day}</span>
          </div>
        </div>
        <h2 className="title">知乎日报</h2>
      </div>
      {/* {头像} */}
      <div
        className="picture"
        onClick={() => {
          navigate('/personal')
        }}
      >
        <img src={info ? info.pic : timg} alt="" />
      </div>
    </header>
  )
}
export default connect((state) => state.base, action.base)(HomeHead)

截取获取当前时分秒

new Date().toLocaleString().split('/').join('').slice(-8)
'16:30:09'

截取掉冒号,获取当前时分秒

new Date().toLocaleString().split('/').join('').slice(-8).split(':').join('')

//'163037'


let time = new Date().toLocaleString().split('/').join('').slice(-8).split(':').join('')
 
console.log(time.match(/^\d{0}(\d{2})(\d{2})(\d{2})$/));

使用数组解构接收,

 
 
let time = new Date().toLocaleString().split('/').join('').slice(-8).split(':').join('')
let [,hour,minute,second]= time.match(/^\d{0}(\d{2})(\d{2})(\d{2})$/)
console.log(hour,minute,second);

截取掉/ (斜杠)获取当前年月日

new Date().toLocaleString().split('/').join('').slice(0,8)
//'20231212 '
new Date().toLocaleString().split('/').join('').slice(0,8).match(/^\d{0}(\d{4})(\d{2})(\d{2})$/)

使用数组解构接收,

   let time = new Date().toLocaleString().split('/').join('').slice(0,8).match(/^\d{0}(\d{4})(\d{2})(\d{2})$/)
      let [, year, month, day] = time
      
      console.log(year, month, day);

//不需要的直接 , 为空就行

注意:获取的是string类型,如果需要数字类型,使用+号转义

`el-date-picker`是Element UI库提供的一种日期选择组件,用于网页端的用户界面设计。在使用`el-date-picker`时,如果你希望显示的时间格式包括年、月、日、时、分、秒,则需要通过配置组件的相关选项来完成。 ### `el-date-picker`的基本结构 首先,你需要引入并初始化`el-date-picker`组件。基本使用示例如下: ```html <template> <div> <el-date-picker v-model="value" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"> <!-- 这里可以添加额外的样式或者内容 --> </el-date-picker> </div> </template> <script> export default { data() { return { value: null, }; }, }; </script> ``` 在这个例子中,`type="datetime"`表示我们选择了日期时间的组合输入,并且`value-format="yyyy-MM-dd HH:mm:ss"`指定了内部存储值的时间格式为“年-月-日 小时:分钟:秒”。 ### 时间格式化的详细设置 如果你想控制界面上显示的时间格式,即用户看到的格式,通常是在JavaScript中处理的,而不是直接在HTML标签上指定。由于`el-date-picker`自身提供的API主要用于获取选定的日期时间,而非直接控制前端展示格式。这意味着你需要结合Vue的计算属性(computed properties)或者Vue.js的插槽(slot)功能来动态调整显示格式。 下面是一个简单的例子展示了如何将选中的时间转换成自定义的字符串格式: ```js export default { computed: { formattedValue() { if (this.value) { // 解析时间字符串,这里假设已经得到的是 "yyyy-MM-dd HH:mm:ss" const date = new Date(this.value); // 格式化成 "YYYY/MM/DD HH:mm:ss" const formattedTime = `${date.getFullYear()}/${('0' + (date.getMonth() + 1)).slice(-2)}/${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`; return formattedTime; } return ''; } }, } ``` 这个计算属性会根据当前选中的时间生成一个格式化的字符串。需要注意的是,在实际应用中,你可能还需要考虑到跨平台的问题以及不同设备或浏览器之间的差异性。 ### 相关问题: 1. **如何在不同环境下适配时间格式显示?** - 考虑到不同地区的日期格式习惯(如“dd/mm/yyyy”与“mm/dd/yyyy”),你可能需要使用国际化支持或提供多种格式供用户选择。 2. **如何优化性能与用户体验?** - 避免频繁计算复杂的字符串格式,尤其是在数据量大或更新频率高的场景下。 3. **如何处理时间日期的校验和验证?** - 确保用户输入的时间满足特定的需求或规则,比如检查是否在某个日期范围内等。这通常需要在提交数据之前进行客户端验证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向画

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值