Uni-app 自定义原生日期选择器组件及平板适配

要实现一个自定义样式的原生日期选择器组件，可以使用 Uni-app 提供的原生组件 picker。首先需要在页面中引入 picker 组件，然后在 data 中定义日期选择器的初始值和格式，接着在页面中使用 picker 组件进行布局和样式设计，最后将选择的日期值保存在 data 中。

为了适配平板端，可以在设计页面布局时考虑使用 flex 布局和响应式设计，使页面能够自适应不同的屏幕尺寸。同时，可以使用 uni-app 提供的屏幕适配方案，如 rem、vw/vh 等，来保证页面元素的大小和间距在不同屏幕上的显示效果一致。

下面是一个简单的代码示例：

<template>
  <view class='container'>
    <view class='picker-container'>
      <picker mode='date' :value='date' @change='onChangeDate'>
        <view class='picker-btn'>选择日期</view>
      </picker>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      format: 'YYYY-MM-DD',
    };
  },
  methods: {
    onChangeDate(e) {
      const date = e.detail.value;
      this.date = date;
    },
  },
};
</script>

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

.picker-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.picker-btn {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  line-height: 100%;
  padding: 20rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
}
</style>

在上面的代码中，我们定义了一个日期选择器组件，并使用了 flex 布局和响应式设计。选择器的样式可以通过修改 .picker-btn 和 .picker-container 的样式来进行自定义。选择的日期值保存在 date 中，可以在其他组件中使用。