uni-app日期选择器显示工作日休息日

在 uni-app 中实现日期选择器并显示工作日和休息日，你可以使用 uni-ui 组件库中的日期选择器组件，并结合 JavaScript 来计算每一天是否为工作日。以下是一个简单的示例代码，展示如何实现这一功能。

首先，确保你的项目中已经安装了 uni-ui 组件库。如果没有安装，可以通过以下命令安装：

npm install @dcloudio/uni-ui

然后，在你的页面中引入并使用日期选择器组件。以下是一个简单的页面示例：

<template>
  <view>
    <uni-date-picker
      v-model="date"
      @change="onDateChange"
      type="date"
      start="2023-01-01"
      end="2023-12-31"
    ></uni-date-picker>
    <view v-for="(day, index) in displayedDays" :key="index">
      {{ day.date }} - {{ isWorkday(day.date) ? '工作日' : '休息日' }}
    </view>
  </view>
</template>

<script>
import { ref, computed } from 'vue';
import UniDatePicker from '@dcloudio/uni-ui/lib/uni-date-picker/uni-date-picker.vue';

export default {
  components: {
    UniDatePicker,
  },
  setup() {
    const date = ref('');
    const displayedDays = computed(() => {
      // 这里简单生成一个月内的日期列表作为示例
      const start = new Date();
      const end = new Date(start);
      end.setMonth(start.getMonth() + 1);
      const days = [];
      let current = new Date(start);
      while (current < end) {
        days.push({ date: current.toISOString().split('T')[0] });
        current.setDate(current.getDate() + 1);
      }
      return days;
    });

    const isWorkday = (dateStr) => {
      const day = new Date(dateStr).getDay();
      // 0 - 星期日, 6 - 星期六
      return day !== 0 && day !== 6;
    };

    const onDateChange = (e) => {
      date.value = e.detail.value;
      // 可以在这里添加更多处理逻辑
    };

    return { date, displayedDays, isWorkday, onDateChange };
  },
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

在这个示例中，我们使用了 uni-date-picker 组件来选择日期，并通过 computed 属性生成了一个月内的日期列表。然后，我们定义了一个 isWorkday 函数来判断某一天是否为工作日，并在模板中显示每个日期及其对应的工作日/休息日状态。

注意，这个示例只是一个简单的实现，你可能需要根据实际需求调整日期生成逻辑和样式。