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

创建一个uni-app项目，选择vue模板。
在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>

在需要使用日期选择器的页面中，引入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>

在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>

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