更新记录

1.0.0（2024-06-28）

first

平台兼容性

r-date-picker

r-date-picker 日期选择器，用于选择年、月、日、时、分、秒，通常与 r-popup 组件配合使用。

示例

<template>
  <view class="content">
    <r-config-provider>
      <view style="padding: 20rpx">
        <view style="padding: 20rpx 0">基本使用</view>
        <r-date-picker
          v-model:value="currentDate"
          title="基本使用"
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />
        <view style="padding: 20rpx 0">加载中</view>
        <r-date-picker
          v-model:value="currentDate"
          title="使用年月"
          loading
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />
        <view style="padding: 20rpx 0">使用年</view>
        <r-date-picker
          v-model:value="currentDate"
          title="使用年"
          columnsType="year"
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />

        <view style="padding: 20rpx 0">使用年月</view>
        <r-date-picker
          v-model:value="currentDate"
          title="使用年月"
          columnsType="month"
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />

        <view style="padding: 20rpx 0">使用时间到秒</view>
        <r-date-picker
          v-model:value="currentDate"
          title="使用时间到秒"
          columnsType="second"
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />

        <view style="padding: 20rpx 0">格式化</view>
        <r-date-picker
          v-model:value="currentDate"
          title="格式化"
          :formatter="formatter"
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />
        <view style="padding: 20rpx 0">使用过滤</view>
        <r-date-picker
          v-model:value="currentDate"
          title="使用过滤"
          :filter="filter"
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />

        <view style="padding: 20rpx 0">配合r-popup</view>
        <r-cell title="配合r-popup使用" is-link @click="show = true" />
      </view>
    </r-config-provider>
    <r-popup v-model:show="show" position="bottom">
      <view style="width: 100%">
        <r-date-picker
          v-model:value="currentDate"
          title="配合r-popup"
          :formatter="formatter"
          @change="change"
          @confirm="confirm"
          @cancel="cancel"
        />
      </view>
    </r-popup>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { _, dayjs } from "@/uni_modules/r-utils/js_sdk/index.js";

const currentDate = ref([]);
const show = ref(false);
const formatter = [
  {
    type: "year",
    fn: (e) => {
      e.item[e.fields.text] = e.item[e.fields.text] + "年";
      return e.item;
    },
  },
  {
    type: "month",
    fn: (e) => {
      e.item[e.fields.text] =
        (e.item[e.fields.text] < 10
          ? "0" + e.item[e.fields.text]
          : e.item[e.fields.text]) + "月";
      console.log("e", e);
      return e.item;
    },
  },
  {
    type: "day",
    fn: (e) => {
      e.item[e.fields.text] =
        (e.item[e.fields.text] < 10
          ? "0" + e.item[e.fields.text]
          : e.item[e.fields.text]) + "日";
      return e.item;
    },
  },
];

const filter = [
  {
    type: "year",
    fn: (e) => {
      return e.item[e.fields.value] >= dayjs().year();
    },
  },
  {
    type: "month",
    fn: (e) => {
      return e.item[e.fields.value] % 2;
    },
  },
];
const change = (e) => {
  console.log("e", e);
};
const confirm = (e) => {
  console.log("e", e);
  show.value = false;
};
const cancel = () => {
  show.value = false;
};
</script>

API

Props

Slots

Events