更新记录

1.0.6（2023-03-17） 下载此版本

增加支持时分秒和时分模式

1.0.5（2022-07-31） 下载此版本

修复 DateSelector 最小、最大日期范围同时设置无效bug。

1.0.4（2022-06-15） 下载此版本

DateSelector 增加支持最大、最小可选日期参数。

平台兼容性

uniapp-datetime-picker 日期时间选择器

适用于 uni-app 的日期时间选择器，兼容 H5、小程序。

• 支持多种日期模式，包括年月日/年月日时分秒/年月/年份/时分秒/时分。
• 支持配置默认选中日期，不传则默认 new Date()。
• 支持配置最小最大日期范围。
• 支持嵌套在页面中使用，不强制固定在页面底部弹窗选择。

DateTimePicker 日期选择器

属性

事件

使用方式

将 components 目录下的组件引入到你的项目，或者去 DCLOUD插件市场 下载安装。

代码演示

<DateTimePicker
  :defaultDate="startDate"
  :maxDate="endDate"
  :mode="mode"
  @onChange="onChangeStartDate"
/>

import DateTimePicker from '../dateTimePicker/index.vue';

export default {
  components: {
    DateTimePicker
  },
  data() {
    return {
      startDate: '2022-02-04',
      endDate: '',
      mode: 1
    };
  },
  methods: {
    onChangeStartDate(date) {
      console.log('onChangeDate', date);
      this.startDate = date;
    }
  }
}

DateSelector 日期范围选择组件

属性

事件

代码演示

<DateSelector
  :mode="selectDateType"
  @onChange="onDateSelectorChange"
  @onSubmit="onDateSelectorSubmit"
  minDate="2020-2-3"
  maxDate="2025-10-11"
  defaultStartDate="2021-1-10"
  defaultEndDate="2022-10-30"
/>

import DateSelector from '@/components/dateSelector/index.vue';

export default {
  components: {
    DateSelector
  },
  methods: {
    onDateSelectorChange({ startDate, endDate }) {
      console.log('onDateSelectorChange', startDate, endDate);
    },
    onDateSelectorSubmit({ startDate, endDate }) {
      console.log('onDateSelectorSubmit', startDate, endDate);
    }
  }
}