vue3怎么开发detePicker日期选择组件

发布时间：2023-03-01 09:58:11 作者：iii
来源：亿速云阅读：110

Vue3 怎么开发 DatePicker 日期选择组件

引言

在现代 Web 开发中，日期选择器（DatePicker）是一个非常常见的 UI 组件。无论是表单提交、日程安排还是数据分析，日期选择器都扮演着重要的角色。Vue3 现代化的前端框架，提供了强大的工具和 API 来帮助我们快速构建复杂的 UI 组件。本文将详细介绍如何使用 Vue3 开发一个功能完善的 DatePicker 日期选择组件。

项目初始化

首先，我们需要创建一个新的 Vue3 项目。如果你还没有安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

然后，使用 Vue CLI 创建一个新的项目：

vue create vue3-datepicker

在项目创建过程中，选择 Vue3 作为项目的默认版本。创建完成后，进入项目目录并启动开发服务器：

cd vue3-datepicker
npm run serve

DatePicker 组件的基本结构

接下来，我们将在 src/components 目录下创建一个新的组件 DatePicker.vue。这个组件将包含日期选择器的基本结构。

<template>
  <div class="date-picker">
    <input
      type="text"
      v-model="selectedDate"
      @click="toggleCalendar"
      readonly
    />
    <div v-if="isOpen" class="calendar">
      <div class="calendar-header">
        <button @click="prevMonth">‹</button>
        <span>{{ currentMonth }}</span>
        <button @click="nextMonth">›</button>
      </div>
      <div class="calendar-body">
        <div class="weekdays">
          <div v-for="day in weekdays" :key="day">{{ day }}</div>
        </div>
        <div class="days">
          <div
            v-for="day in days"
            :key="day.date"
            :class="{
              'current-month': day.isCurrentMonth,
              'selected': day.isSelected,
              'disabled': day.isDisabled
            }"
            @click="selectDate(day)"
          >
            {{ day.date }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'DatePicker',
  setup() {
    const selectedDate = ref('');
    const isOpen = ref(false);
    const currentDate = ref(new Date());

    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    const currentMonth = computed(() => {
      return currentDate.value.toLocaleString('default', { month: 'long', year: 'numeric' });
    });

    const days = computed(() => {
      const year = currentDate.value.getFullYear();
      const month = currentDate.value.getMonth();
      const firstDayOfMonth = new Date(year, month, 1);
      const lastDayOfMonth = new Date(year, month + 1, 0);
      const daysInMonth = lastDayOfMonth.getDate();
      const firstDayOfWeek = firstDayOfMonth.getDay();

      const daysArray = [];

      for (let i = 0; i < firstDayOfWeek; i++) {
        daysArray.push({ date: '', isCurrentMonth: false, isSelected: false, isDisabled: true });
      }

      for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(year, month, i);
        const isSelected = selectedDate.value === date.toISOString().split('T')[0];
        daysArray.push({ date: i, isCurrentMonth: true, isSelected, isDisabled: false });
      }

      return daysArray;
    });

    const toggleCalendar = () => {
      isOpen.value = !isOpen.value;
    };

    const prevMonth = () => {
      currentDate.value.setMonth(currentDate.value.getMonth() - 1);
    };

    const nextMonth = () => {
      currentDate.value.setMonth(currentDate.value.getMonth() + 1);
    };

    const selectDate = (day) => {
      if (day.isDisabled) return;
      const date = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), day.date);
      selectedDate.value = date.toISOString().split('T')[0];
      isOpen.value = false;
    };

    return {
      selectedDate,
      isOpen,
      currentDate,
      weekdays,
      currentMonth,
      days,
      toggleCalendar,
      prevMonth,
      nextMonth,
      selectDate,
    };
  },
};
</script>

<style scoped>
.date-picker {
  position: relative;
  display: inline-block;
}

.calendar {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.days div {
  text-align: center;
  padding: 5px;
  cursor: pointer;
  border-radius: 4px;
}

.days div.current-month {
  background: #f0f0f0;
}

.days div.selected {
  background: #007bff;
  color: white;
}

.days div.disabled {
  color: #ccc;
  cursor: not-allowed;
}
</style>

日期选择逻辑

在上面的代码中，我们已经实现了一个基本的日期选择器。用户可以通过点击输入框来打开日历，选择日期后，日历会自动关闭并将选中的日期显示在输入框中。

1. `selectedDate` 和 `isOpen`

selectedDate 是一个响应式变量，用于存储用户选择的日期。isOpen 用于控制日历的显示和隐藏。

2. `currentDate`

currentDate 用于存储当前显示的月份。用户可以通过点击“‹”和“›”按钮来切换月份。

3. `days`

days 是一个计算属性，用于生成当前月份的日期数组。每个日期对象包含以下属性：

date: 日期（1-31）。
isCurrentMonth: 是否为当前月份的日期。
isSelected: 是否为用户选择的日期。
isDisabled: 是否为不可选的日期（例如上个月或下个月的日期）。

4. `selectDate`

selectDate 方法用于处理用户选择日期的逻辑。当用户点击某个日期时，该方法会更新 selectedDate 并关闭日历。

日期范围选择

在某些场景下，用户可能需要选择一个日期范围（例如选择入住和退房日期）。我们可以通过扩展 DatePicker 组件来实现这一功能。

1. 添加 `startDate` 和 `endDate`

首先，我们需要添加两个新的响应式变量 startDate 和 endDate，用于存储用户选择的开始日期和结束日期。

const startDate = ref('');
const endDate = ref('');

2. 修改 `selectDate` 方法

接下来，我们需要修改 selectDate 方法，使其支持选择日期范围。当用户选择一个日期时，如果 startDate 为空，则将其设置为选中的日期；如果 startDate 不为空且 endDate 为空，则将其设置为选中的日期，并关闭日历。

const selectDate = (day) => {
  if (day.isDisabled) return;
  const date = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), day.date);
  const dateString = date.toISOString().split('T')[0];

  if (!startDate.value) {
    startDate.value = dateString;
  } else if (!endDate.value) {
    endDate.value = dateString;
    isOpen.value = false;
  } else {
    startDate.value = dateString;
    endDate.value = '';
  }
};

3. 更新 `days` 计算属性

最后，我们需要更新 days 计算属性，使其能够根据 startDate 和 endDate 来高亮显示选中的日期范围。

const days = computed(() => {
  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth();
  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const firstDayOfWeek = firstDayOfMonth.getDay();

  const daysArray = [];

  for (let i = 0; i < firstDayOfWeek; i++) {
    daysArray.push({ date: '', isCurrentMonth: false, isSelected: false, isDisabled: true });
  }

  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i);
    const dateString = date.toISOString().split('T')[0];
    const isSelected = (dateString >= startDate.value && dateString <= endDate.value) || dateString === startDate.value || dateString === endDate.value;
    daysArray.push({ date: i, isCurrentMonth: true, isSelected, isDisabled: false });
  }

  return daysArray;
});

日期格式化

在实际应用中，我们通常需要将日期格式化为特定的字符串格式（例如 YYYY-MM-DD）。我们可以使用 date-fns 库来实现这一功能。

1. 安装 `date-fns`

首先，我们需要安装 date-fns 库：

npm install date-fns

2. 使用 `date-fns` 格式化日期

接下来，我们可以使用 date-fns 提供的 format 函数来格式化日期。

import { format } from 'date-fns';

const selectedDate = ref('');
const startDate = ref('');
const endDate = ref('');

const formatDate = (date) => {
  return format(new Date(date), 'yyyy-MM-dd');
};

const selectDate = (day) => {
  if (day.isDisabled) return;
  const date = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), day.date);
  const dateString = formatDate(date);

  if (!startDate.value) {
    startDate.value = dateString;
  } else if (!endDate.value) {
    endDate.value = dateString;
    isOpen.value = false;
  } else {
    startDate.value = dateString;
    endDate.value = '';
  }
};

国际化支持

为了支持多语言环境，我们可以使用 vue-i18n 库来实现国际化。

1. 安装 `vue-i18n`

首先，我们需要安装 vue-i18n 库：

npm install vue-i18n

2. 配置 `vue-i18n`

接下来，我们需要在项目中配置 vue-i18n。在 src 目录下创建一个新的文件 i18n.js，并添加以下内容：

import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  },
  zh: {
    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  },
};

const i18n = createI18n({
  locale: 'en',
  messages,
});

export default i18n;

3. 在 `DatePicker` 组件中使用 `vue-i18n`

最后，我们需要在 DatePicker 组件中使用 vue-i18n 提供的 t 函数来翻译文本。

import { useI18n } from 'vue-i18n';

export default {
  name: 'DatePicker',
  setup() {
    const { t } = useI18n();

    const weekdays = computed(() => {
      return t('weekdays');
    });

    const currentMonth = computed(() => {
      return t('months')[currentDate.value.getMonth()] + ' ' + currentDate.value.getFullYear();
    });

    return {
      t,
      weekdays,
      currentMonth,
    };
  },
};

样式美化

为了让日期选择器看起来更加美观，我们可以使用 CSS 对其进行样式美化。以下是一些常见的样式调整：

1. 日历布局

我们可以使用 CSS Grid 来实现日历的布局。

.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

2. 日期样式

我们可以为不同的日期状态（例如当前月份、选中日期、不可选日期）设置不同的样式。

.days div {
  text-align: center;
  padding: 5px;
  cursor: pointer;
  border-radius: 4px;
}

.days div.current-month {
  background: #f0f0f0;
}

.days div.selected {
  background: #007bff;
  color: white;
}

.days div.disabled {
  color: #ccc;
  cursor: not-allowed;
}

3. 日历头部样式

我们可以为日历头部（包含月份和切换按钮）设置样式。

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}

组件封装与发布

在完成 DatePicker 组件的开发后，我们可以将其封装为一个独立的 Vue 组件库，并发布到 npm 上，供其他开发者使用。

1. 创建组件库

首先，我们需要创建一个新的 Vue 组件库项目。可以使用 Vue CLI 的 library 模式来创建：

vue create vue3-datepicker-library

在项目创建过程中，选择 Library 作为项目类型。

2. 封装 DatePicker 组件

将 DatePicker.vue 组件移动到 src/components 目录下，并在 src/index.js 中导出该组件：

import DatePicker from './components/DatePicker.vue';

export default DatePicker;

3. 发布到 npm

在项目根目录下运行以下命令，将组件库发布到 npm：

npm publish

总结

通过本文的介绍，我们详细讲解了如何使用 Vue3 开发一个功能完善的 DatePicker 日期选择组件。我们从项目初始化开始，逐步实现了日期选择、日期范围选择、日期格式化、国际化支持等功能，并对组件进行了样式美化。最后，我们还介绍了如何将组件封装为一个独立的 Vue 组件库，并发布到 npm 上。

希望本文能够帮助你更好地理解 Vue3 的开发流程，并为你的项目开发提供一些参考。如果你有任何问题或建议，欢迎在评论区留言讨论。

vue3怎么开发detePicker日期选择组件

Vue3 怎么开发 DatePicker 日期选择组件

目录

引言

项目初始化

DatePicker 组件的基本结构

日期选择逻辑

1. selectedDate 和 isOpen

2. currentDate

3. days

4. selectDate