当前位置: 首页 > article >正文

a-range-picker 时间选择器的默认日期显示,日期格式化

效果图

在这里插入图片描述

代码

<a-range-picker v-model:value="date" show-time />

js代码处理: 前置+0,时间格式化

const handleTime = (t) => {
  return t < 10 ? "0" + t : t;
};
const handleDate = (date) => {
  const year = date?.$d.getFullYear();
  const month = handleTime(date?.$d.getMonth() + 1);
  const day = handleTime(date?.$d.getDate());
  const hours = handleTime(date?.$d.getHours());
  const minutes = handleTime(date?.$d.getMinutes());
  const seconds = handleTime(date?.$d.getSeconds());
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const getInitializeDate = () => {
  let date = new Date();
  let year = date.getFullYear();
  let month = handleTime(date.getMonth() + 1);
  let day = handleTime(date.getDate());
  let s = year + "-" + month + "-01" + " 00:00:00";
  let e =
    year +
    "-" +
    month +
    "-" +
    day +
    ` ${handleTime(date.getHours())}:${handleTime(
      date.getMinutes()
    )}:${handleTime(date.getSeconds())}`;
  const times = { start: s, end: e };
  return times;
};
let { start, end } = getInitializeDate();
let date = ref([
  dayjs(start, "YYYY-MM-DD HH:mm:ss"),
  dayjs(end, "YYYY-MM-DD HH:mm:ss"),
]);

若是需要进行传值,可使用如下代码

const handleSearch = async () => {
  try {
    const res = await GetPersonStatistics({
      data: `${handleDate(date.value[0])}-${handleDate(date.value[1])}`,
    });
  	// ... more
  } catch (error) {
    throw new Error(error)
  }
};

http://www.kler.cn/a/148776.html

相关文章:

  • C++——视频问题总结
  • React Native 全栈开发实战班 - 核心组件与导航
  • 【MySQL 保姆级教学】事务的自动提交和手动提交(重点)--上(13)
  • openwebui二改界面环境搭建
  • Kettle配置数据源错误“Driver class ‘org.gjt.mm.mysql.Driver‘ could not be found”解决记录
  • 【C++】string类(附题)
  • OMP: Error #15: Initializing libiomp5md.dll
  • C语言——求π的近似值
  • 第八节HarmonyOS @Component自定义组件的生命周期
  • 【Qt之QSqlTableModel】介绍及使用
  • u-popup组件在UniApp中的讲解
  • Unity 关于生命周期函数的一些认识
  • 【创建一个组件并通过npm让其他人安装和调用】
  • 【数据结构】排序效率最优解之一:二叉树-堆
  • .netcore 获取appsettings
  • Leetcode—58.最后一个单词的长度【简单】
  • Linux处理文件常见命令
  • 基于合成数据的行人检测AI模型训练
  • 火柴人版王者-Java
  • java使用freemarker模板生成html,再生成pdf
  • 利用Spring Boot构建restful web service的详细流程
  • Nginx系列-正向代理和反向代理
  • Vue3+java开发组队功能
  • 【hive-design】hive架构详解:描述了hive架构,hive主要组件的作用、hsql在hive执行过程中的底层细节、hive各组件作用
  • Java中关于ArrayList集合的练习题
  • Xilinx Zynq-7000系列FPGA多路视频处理:图像缩放+视频拼接显示,提供工程源码和技术支持