更新记录

0.0.1（2024-09-04）

• 首次上传

• 支持日期和时间选择

• 支持时间单独选择

• 支持日期单独选择

平台兼容性

jc-date-picker

jc-date-picker，是一款适配 uni-app x 的比较轻量、简洁日期选择器。（只支持uniApp X）

快速上手

引入

下载源码后，直接使用。

如何使用

无需在画面引入组件。在调用画面按照下面方法复制对应的代码即可

<template>
  <view>
    <view style="flex-direction: row;justify-content: center;align-items: center;margin: 40rpx;"
      @click="openDateTimePicker">
      点击选择日期时间：<text class="title">{{showDateTime}}</text>
    </view>
    <view style="flex-direction: row;justify-content: center;align-items: center;margin: 40rpx;"
      @click="openTimePicker">
      点击选择时间：<text class="title">{{showTime}}</text>
    </view>
    <view style="flex-direction: row;justify-content: center;align-items: center;margin: 40rpx;"
      @click="openDatePicker">
      点击选择日期：<text class="title">{{showDate}}</text>
    </view>
  </view>
  <jc-date-time-picker v-model:visible="dateTimeShow" :zIndex="1096" :dateTime="dateTimeList" maskClosable
    @confirm="bindDateTimeChange"></jc-date-time-picker>
  <jc-time-picker v-model:visible="timeShow" :dataTime="timeList" @confirm="bindTimeChange"></jc-time-picker>
  <jc-date-picker v-model:visible="dateShow" :zIndex="1096" :dateTime="dateList" maskClosable
    @confirm="bindDateChange"></jc-date-picker>
</template>

<script lang="uts">
  export default {
    data() {
      const date = new Date();
      const year : number = date.getFullYear();
      const month : number = date.getMonth() + 1;
      const day : number = date.getDay();
      const hour : number = date.getHours()
      const minute : number = date.getMinutes()
      const second : number = date.getSeconds()
      return {
        dateTimeShow: false,
        dateShow: false,
        timeShow: false,
        dateTimeList: [year, month, day, hour, minute, second] as Array<number>,
        dateList: [year, month, day] as Array<number>,
        timeList: [0, 0, 0, hour, minute, second] as Array<number>,
        showDateTime: this.fomartDataTime(year, month, day, hour, minute, second),
        showTime: this.fomartDataTime(0, 0, 0, hour, minute, second),
        showDate: this.fomartDataTime(year, month, day, 0, 0, 0),
      }
    },
    onLoad() {

    },
    methods: {
      openDateTimePicker() {
        this.dateTimeShow = true
      },
      openTimePicker() {
        this.timeShow = true
      },
      openDatePicker() {
        this.dateShow = true
      },
      bindDateTimeChange(year : number, month : number, day : number, hour : number, minute : number, second : number) {
        this.dateTimeList = [year, month, day, hour, minute, second] as Array<number>
        this.showDateTime = this.fomartDataTime(year, month, day, hour, minute, second)
      },
      bindDateChange(year : number, month : number, day : number) {
        this.dateList = [year, month, day] as Array<number>
        this.showDate = this.fomartDataTime(year, month, day, 0, 0, 0,)
      },
      bindTimeChange(hour : number, minute : number, second : number) {
        this.timeList = [0, 0, 0, hour, minute, second] as Array<number>
        this.showTime = this.fomartDataTime(0, 0, 0, hour, minute, second)
      },
      fomartDataTime(year : number, month : number, day : number, hour : number, minute : number, second : number) : string {
        // #ifdef APP
        const zeroToNight : Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        // #endif
        // #ifdef WEB
        const zeroToNight = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        // #endif
        if (year == 0 && month == 0 && day == 0) {
          return `${zeroToNight.includes(hour) ? `0${hour}` : hour}:${zeroToNight.includes(minute) ? `0${minute}` : minute}:${zeroToNight.includes(second) ? `0${second}` : second}`;
        }
        if (hour == 0 && minute == 0 && second == 0) {
          return `${year}-${zeroToNight.includes(month) ? `0${month}` : month}-${zeroToNight.includes(day) ? `0${day}` : day}`;
        }
        return `${year}-${zeroToNight.includes(month) ? `0${month}` : month}-${zeroToNight.includes(day) ? `0${day}` : day} ${zeroToNight.includes(hour) ? `0${hour}` : hour}:${zeroToNight.includes(minute) ? `0${minute}` : minute}:${zeroToNight.includes(second) ? `0${second}` : second}`;
      }
    }
  }
</script>

更新日志

V0.0.1（2024-09-04）

• 首次上传

• 支持日期和时间选择

• 支持时间单独选择

• 支持日期单独选择