Ant Design时间选择器默认显示当前年份-CFANZ编程社区

文章目录

使用Ant Design遇到的问题
如何解决

dayjs 介绍
import type { Dayjs } from 'dayjs'和import dayjs from "dayjs"有什么区别

最终效果

使用Ant Design遇到的问题

时间选择器不能默认显示当前的日期年份，官网也没有默认显示当前年份，官网给出的代码示例，其中

<template>
  <a-space direction="vertical" :size="12">
    <a-date-picker v-model:value="value5" picker="year" />
  </a-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { Dayjs } from 'dayjs';
const value5 = ref<Dayjs>();
</script>

按照这样写的话，不能显示当前年份的默认日期

如何解决

1、在date-picker中设置format为yyyy
2、不使用官网提供的引入dayjs，替换为import dayjs from “dayjs”;
3、并定义绑定日期的选择框，并给赋默认值startof方法

<a-date-picker v-model:value="selectDate" picker="year" class="date-picker" format="YYYY" />


import dayjs from "dayjs";
const selectDate = ref(dayjs().startOf('year'))// 获取当前年份

dayjs 介绍

dayjs 是一个轻量级的 JavaScript 时间日期处理库，它提供了类似于 Moment.js 的 API，但体积更小，更适合现代前端应用。dayjs 可以帮助你轻松地处理日期和时间，包括格式化、解析、操作等。

首先，你需要在你的项目中安装 dayjs。你可以使用 npm 或 yarn 来安装

npm install dayjs

或者

yarn add dayjs

在你的 Vue 组件或其他 JavaScript 文件中导入 dayjs：

import dayjs from 'dayjs';

dayjs 提供了多种方法来处理日期和时间。以下是一些常见的用法示例：
1、创建一个 dayjs 对象

你可以通过传递一个日期字符串或一个 JavaScript Date 对象来创建一个 dayjs 对象。

const now = dayjs(); // 当前时间
const specificDate = dayjs('2023-10-01'); // 指定日期
const dateObject = dayjs(new Date()); // 从 JavaScript Date 对象创建

2、格式化日期
你可以使用 format 方法将 dayjs 对象格式化为字符串

const formattedDate = now.format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // 输出类似 "2024-11-28 09:39:00"

3、解析日期

const parsedDate = dayjs('2023-10-01', 'YYYY-MM-DD');
console.log(parsedDate.format('YYYY-MM-DD')); // 输出 "2023-10-01"

操作日期
你可以对 dayjs 对象进行各种操作，例如加减时间、获取年份、月份等。

const nextYear = now.add(1, 'year'); // 加一年
const lastMonth = now.subtract(1, 'month'); // 减一个月
const year = now.get('year'); // 获取年份
const month = now.get('month') + 1; // 获取月份（注意：月份是从 0 开始的）
const day = now.get('date'); // 获取日

5、设置日期
你可以设置 dayjs 对象的日期部分。

const newDate = now.set('year', 2023).set('month', 9).set('date', 1);
console.log(newDate.format('YYYY-MM-DD')); // 输出 "2023-10-01"

import type { Dayjs } from 'dayjs’和import dayjs from "dayjs"有什么区别

import type { Dayjs } from ‘dayjs’ 和 import dayjs from “dayjs”; 是两种不同类型的导入，它们在用途和功能上有所区别。

import type { Dayjs } from ‘dayjs’
用途：这种导入方式用于类型定义。它告诉 TypeScript 编译器你需要使用 Dayjs 类型，但不需要实际的运行时代码。
作用：主要用于类型检查和类型注解。它不会增加最终打包文件的大小，因为这些类型信息只在编译阶段使用，在生成的 JavaScript 代码中会被移除。

import type { Dayjs } from 'dayjs';

const date: Dayjs = dayjs(); // 使用 Dayjs 类型进行类型注解

import dayjs from “dayjs”
用途：这种导入方式用于引入 dayjs 库的实际功能。它会将 dayjs 库的运行时代码引入到你的项目中。
作用：提供日期和时间处理的功能，如创建、解析、格式化和操作日期对象

import dayjs from 'dayjs';

const now = dayjs(); // 创建一个表示当前时间的 Dayjs 对象
const formattedDate = now.format('YYYY-MM-DD'); // 格式化日期

区别总结
类型 vs 实际代码：
import type { Dayjs } from ‘dayjs’ 仅用于类型定义，不包含任何运行时代码。
import dayjs from “dayjs” 引入了 dayjs 库的实际运行时代码，提供了日期和时间处理的功能。
编译阶段 vs 运行时：
import type 只在编译阶段使用，不会影响最终的打包文件大小。
import dayjs 在运行时可用，会增加打包文件的大小，因为它包含了实际的库代码。
使用场景：
如果你只需要进行类型注解而不需要实际使用 dayjs 的功能，可以使用 import type。
如果你需要使用 dayjs 的功能（如创建、格式化、解析日期等），则需要使用 import dayjs。
示例

最终效果

Ant Design时间选择器默认显示当前年份_官网