Uni-App 自定义原生日期选择器组件实现教程

使用 Uni-App 实现一个自定义样式的原生日期选择器组件

本文将详细介绍使用 Uni-App 开发一个自定义样式的原生日期选择器组件，并提供完整代码示例。该组件包含标题、取消、确定按钮，以及年份、月份、日期选择区域。

1. 创建 Uni-App 项目

首先，创建一个新的 Uni-App 项目，并选择 Vue 模板。

2. 创建 DatePicker 页面

在 pages 文件夹下创建一个名为 DatePicker 的页面，并在 DatePicker.vue 文件中编写日期选择器组件的代码。

<template>
  <div class='date-picker'>
    <div class='date-picker-header'>
      <div class='date-picker-title'>{{ title }}</div>
      <div class='date-picker-cancel' @click='cancel'>取消</div>
      <div class='date-picker-confirm' @click='confirm'>确定</div>
    </div>
    <div class='date-picker-content'>
      <div class='date-picker-item' v-for='(item, index) in items' :key='index'>
        <div class='date-picker-item-text' :class='{ active: item.active }'>{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '请选择'
    },
    value: {
      type: Array,
      default: () => []
    },
    startYear: {
      type: Number,
      default: new Date().getFullYear() - 10
    },
    endYear: {
      type: Number,
      default: new Date().getFullYear()
    }
  },
  data() {
    return {
      items: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const [year, month, day] = this.value;
      const years = [];

      for (let i = this.startYear; i <= this.endYear; i++) {
        years.push(i);
      }

      const months = [];

      for (let i = 1; i <= 12; i++) {
        months.push(i);
      }

      const days = [];

      const lastDay = new Date(year, month, 0).getDate();

      for (let i = 1; i <= lastDay; i++) {
        days.push(i);
      }

      this.items = [
        {
          text: `${year}年`,
          active: false,
          options: years
        },
        {
          text: `${month}月`,
          active: false,
          options: months
        },
        {
          text: `${day}日`,
          active: false,
          options: days
        }
      ];

      this.updateActive();
    },
    updateActive() {
      const [year, month, day] = this.value;

      this.items[0].active = true;
      this.items[0].options.forEach(item => {
        if (item === year) {
          return;
        }

        this.items[0].active = false;
      });

      this.items[1].active = true;
      this.items[1].options.forEach(item => {
        if (item === month) {
          return;
        }

        this.items[1].active = false;
      });

      this.items[2].active = true;
      this.items[2].options.forEach(item => {
        if (item === day) {
          return;
        }

        this.items[2].active = false;
      });
    },
    cancel() {
      this.$emit('cancel');
    },
    confirm() {
      const [year, month, day] = this.value;

      const date = new Date(year, month - 1, day);

      this.$emit('confirm', date);
    }
  }
};
</script>

<style scoped>
.date-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e5e5e5;
  font-size: 16px;
  color: #333;
}

.date-picker-title {
  flex: 1;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.date-picker-cancel,
.date-picker-confirm {
  min-width: 64px;
  color: #007aff;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.date-picker-content {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background-color: #f7f7f7;
}

.date-picker-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px;
  background-color: #fff;
  border-radius: 4px;
}

.date-picker-item:last-child {
  margin-right: 0;
}

.date-picker-item-text {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.date-picker-item-text.active {
  color: #007aff;
  font-weight: bold;
}
</style>

3. 引入 DatePicker 组件

在需要使用日期选择器的页面中，引入 DatePicker 组件。

<template>
  <div class='container'>
    <div class='date-picker-wrapper' v-show='showDatePicker'>
      <date-picker
        :title='datePickerTitle'
        :value='datePickerValue'
        @cancel='hideDatePicker'
        @confirm='onDateChange'
      />
    </div>
    <div class='input-wrapper' @click='showDatePicker = true'>
      <input
        type='text'
        class='input'
        :value='dateString'
        placeholder='请选择日期'
        readonly
      />
    </div>
  </div>
</template>

<script>
import DatePicker from '@/components/DatePicker';

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      showDatePicker: false,
      datePickerTitle: '请选择日期',
      datePickerValue: [],
      date: null
    };
  },
  computed: {
    dateString() {
      if (!this.date) {
        return '';
      }

      const year = this.date.getFullYear();
      const month = this.date.getMonth() + 1;
      const day = this.date.getDate();

      return `${year}-${month >= 10 ? month : '0' + month}-${day >= 10 ? day : '0' + day}`;
    }
  },
  methods: {
    hideDatePicker() {
      this.showDatePicker = false;
    },
    onDateChange(date) {
      this.date = date;
      this.hideDatePicker();
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.date-picker-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.input-wrapper {
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  font-size: 16px;
  color: #666;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>

4. 添加全局样式

在 App.vue 文件中，添加全局样式。

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #f7f7f7;
}

#app {
  height: 100%;
}
</style>

5. 运行项目

运行 Uni-App 项目，即可看到自定义样式的原生日期选择器组件。

总结

本文介绍了使用 Uni-App 开发自定义样式的原生日期选择器组件的步骤，并提供了完整代码示例。该组件可以方便地应用于各种 Uni-App 项目中，为用户提供更友好的日期选择体验。