created

uni_modules/buuug7-simple-datetime-picker/changelog.md

@@ -0,0 +1,43 @@
+# CHANGELOG
+
+## 0.7.0（2023-07-11）
+- 增加`time-init`属性, 自定义初始时间, 默认为当前时间, 值为时间戳
+## 0.6.0（2023-07-11）
+
+- 增加对秒的选择
+- 增加`timeHidden`属性, 自定义年月日时分秒自由显示
+- 增加`timeLabel`属性, 自定义界面时间单位，默认为 `["年", "月", "日", "时", "分", "秒"]`
+- 修复微信小程序中无法定位到当前时间
+
+## 0.5.0（2021-08-17）
+
+- refactor
+
+## 0.4.1（2021-08-17）
+
+- update readme.md
+
+## 0.4.0（2021-08-17）
+
+- 移除组件 `color` 属性
+- update readme.md
+
+## 0.3.3（2021-08-15）
+
+- 修改插件基本信息
+
+## 0.3.2（2021-08-15）
+
+- 更新文档
+
+## 0.3.1（2021-08-15）
+
+- fix
+
+## 0.3.0（2019-07-22）
+
+- 增加 color 属性，可以更换按钮颜色
+
+## 0.0.4（2019-07-17）
+
+- 增加从 npm 安装方式

uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue

@@ -0,0 +1,335 @@
+<template>
+  <view class="buuug7-simple-datetime-picker" v-if="done">
+    <view
+      class="mask"
+      :class="{ show: open }"
+      @touchmove.stop.prevent
+      catchtouchmove="true"
+    >
+    </view>
+    <view class="wrap" :class="{ show: open }">
+      <view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
+        <view class="btn-picker cancel" @click="open = false">取消</view>
+        <view class="btn-picker submit" @click="_onSubmit">确定</view>
+      </view>
+      <view class="picker-body">
+        <picker-view :value="value" @change="_onChange">
+          <picker-view-column v-if="timeHide[0]">
+            <view class="column-item" v-for="item in years" :key="item">
+              {{ item + timeLabel[0] }}
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="timeHide[1]">
+            <view class="column-item" v-for="item in months" :key="item">
+              {{ formatNum(item) + timeLabel[1] }}
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="timeHide[2]">
+            <view class="column-item" v-for="item in days" :key="item">
+              {{ formatNum(item) + timeLabel[2] }}
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="timeHide[3]">
+            <view class="column-item" v-for="item in hours" :key="item">
+              {{ formatNum(item) + timeLabel[3] }}
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="timeHide[4]">
+            <view class="column-item" v-for="item in minutes" :key="item">
+              {{ formatNum(item) + timeLabel[4] }}
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="timeHide[5]">
+            <view class="column-item" v-for="item in seconds" :key="item">
+              {{ formatNum(item) + timeLabel[5] }}
+            </view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "buuug7-simple-datetime-picker",
+  props: {
+    startYear: {
+      type: Number,
+      default: 2000,
+    },
+    endYear: {
+      type: Number,
+      default: 2099,
+    },
+    timeLabel: {
+      type: Array,
+      default: () => ["年", "月", "日", "时", "分", "秒"],
+    },
+    timeHide: {
+      type: Array,
+      default: () => [true, true, true, true, true, false],
+    },
+    timeInit: {
+      type: Number,
+      default: new Date().valueOf(),
+    },
+  },
+
+  data() {
+    return {
+      open: false,
+      years: [],
+      months: [],
+      days: [],
+      hours: [],
+      minutes: [],
+      seconds: [],
+      year: "",
+      month: "",
+      day: "",
+      hour: "",
+      minute: "",
+      second: "",
+      value: [0, 0, 0, 0, 0, 0],
+      done: false,
+    };
+  },
+
+  computed: {
+    currentDatetime() {
+      return new Date(this.timeInit);
+    },
+  },
+
+  mounted() {
+    this.init();
+  },
+
+  watch: {
+    month() {
+      this.initDays();
+    },
+  },
+
+  methods: {
+    init() {
+      this.initYears();
+      this.initMonths();
+      this.initDays();
+      this.initHours();
+      this.initMinutes();
+      this.initSeconds();
+      this.setSelectValue();
+      this.done = true;
+    },
+
+    initYears() {
+      const years = [];
+      for (let year = this.startYear; year <= this.endYear; year++) {
+        years.push(year);
+        if (this.currentDatetime.getFullYear() === year) {
+          this.$set(this.value, 0, year - this.startYear);
+        }
+      }
+      this.years = years;
+    },
+
+    initMonths() {
+      const months = [];
+      for (let month = 1; month <= 12; month++) {
+        months.push(month);
+        if (this.currentDatetime.getMonth() + 1 === month) {
+          this.$set(this.value, 1, month - 1);
+        }
+      }
+      this.months = months;
+    },
+
+    initDays() {
+      const value = this.value;
+      const selectedYear = this.years[value[0]];
+      const selectedMonth = this.months[value[1]];
+      const days = [];
+      const totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
+      for (let day = 1; day <= totalDays; day++) {
+        days.push(day);
+        if (this.currentDatetime.getDate() === day) {
+          this.$set(value, 2, day - 1);
+        }
+      }
+      this.days = days;
+    },
+
+    initHours() {
+      const hours = [];
+      for (let hour = 0; hour <= 23; hour++) {
+        hours.push(hour);
+        if (this.currentDatetime.getHours() === hour) {
+          this.$set(this.value, 3, hour);
+        }
+      }
+      this.hours = hours;
+    },
+
+    initMinutes() {
+      const minutes = [];
+      for (let minute = 0; minute < 60; minute++) {
+        minutes.push(minute);
+        if (this.currentDatetime.getMinutes() === minute) {
+          this.$set(this.value, 4, minute);
+        }
+      }
+      this.minutes = minutes;
+    },
+
+    initSeconds() {
+      const seconds = [];
+      for (let second = 0; second < 60; second++) {
+        seconds.push(second);
+        if (this.currentDatetime.getSeconds() === second) {
+          this.$set(this.value, 5, second);
+        }
+      }
+      this.seconds = seconds;
+    },
+
+    show() {
+      this.open = true;
+    },
+
+    hide() {
+      this.open = false;
+    },
+
+    _onChange(e) {
+      this.value = e.detail.value;
+      this.setSelectValue();
+    },
+
+    setSelectValue() {
+      const v = this.value;
+
+      this.year = this.years[v[0]];
+      this.month = this.months[v[1]];
+      this.day = this.days[v[2]];
+      this.hour = this.hours[v[3]];
+      this.minute = this.minutes[v[4]];
+      this.second = this.seconds[v[5]];
+    },
+
+    _onSubmit() {
+      const {
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        second,
+        formatNum,
+        timeHide,
+        timeLabel,
+      } = this;
+      const result = {
+        year: timeHide[0] ? formatNum(year) : "",
+        month: timeHide[1] ? formatNum(month) : "",
+        day: timeHide[2] ? formatNum(day) : "",
+        hour: timeHide[3] ? formatNum(hour) : "",
+        minute: timeHide[4] ? formatNum(minute) : "",
+        second: timeHide[5] ? formatNum(second) : "",
+      };
+
+      this.$emit("submit", result);
+      this.hide();
+    },
+
+    formatNum(num) {
+      return num < 10 ? "0" + num : num + "";
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+$transition: all 0.3s ease;
+$primary: #488ee9;
+
+.buuug7-simple-datetime-picker {
+  position: relative;
+  z-index: 999;
+  picker-view {
+    height: 100%;
+  }
+  .mask {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    visibility: hidden;
+    opacity: 0;
+    transition: $transition;
+    &.show {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+  .wrap {
+    z-index: 1001;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transition: $transition;
+    transform: translateY(100%);
+    &.show {
+      transform: translateY(0);
+    }
+  }
+  .picker-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 8px;
+    background-color: darken(#fff, 2%);
+    background-color: #fff;
+  }
+  .picker-body {
+    width: 100%;
+    height: 420rpx;
+    overflow: hidden;
+    background-color: #fff;
+  }
+  .column-item {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .btn-picker {
+    position: relative;
+    display: inline-block;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+    text-align: center;
+    text-decoration: none;
+    line-height: 2;
+    -webkit-tap-highlight-color: transparent;
+    overflow: hidden;
+    background-color: #eee;
+    font-size: 14px;
+    border-radius: 3px;
+    color: #000;
+    cursor: pointer;
+  }
+  .btn-picker.submit {
+    background-color: $primary;
+    color: #fff;
+  }
+}
+</style>

uni_modules/buuug7-simple-datetime-picker/package.json

@@ -0,0 +1,77 @@
+{
+  "id": "buuug7-simple-datetime-picker",
+  "displayName": "简单的日期时间选择器",
+  "version": "0.7.0",
+  "description": "uniApp 简单的日期时间选择器, 可选择年, 月, 日, 时, 分, 秒",
+  "keywords": [
+    "时间",
+    "日期",
+    "时间选择器",
+    "日期时间选择器",
+    "datetime"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.6.1"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": "3190136675"
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "n",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/buuug7-simple-datetime-picker/readme.md

@@ -0,0 +1,97 @@
+# uniApp 简单的日期时间选择器
+
+uniApp 日期时间选择器, 可选择年, 月, 日, 时, 分, 秒.
+
+## screenshot
+
+<p>
+  <img align=top src="https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/19363640-a869-11e9-a6c7-7fb99abe2bbf_0.png?1629144139" width="300px" height="auto">
+</p>
+
+## 安装
+
+推荐从[dcloud 插件市场](https://ext.dcloud.net.cn/plugin?id=592) 安装.
+
+## 用法
+
+在 template 中：
+
+```vue
+<template>
+  <view>
+    <button type="default" @click="openDatetimePicker">open picker</button>
+    <buuug7-simple-datetime-picker
+      ref="myPicker"
+      @submit="handleSubmit"
+      :start-year="2000"
+      :end-year="2099"
+      :time-init="1688860800000"
+      :time-hide="[true, true, true, true, true, false]"
+      :time-label="['年', '月', '日', '时', '分', '秒']"
+    />
+  </view>
+</template>
+```
+
+在 script 中：
+
+- 该插件遵循 easycom 规范, 不用显式导入就可以使用 `<buuug7-simple-datetime-picker />`
+- 如需显式导入可以使用`import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";`
+
+```javascript
+export default {
+  data() {
+    return {
+      birthday: "",
+    };
+  },
+  methods: {
+    // 打开picker
+    openDatetimePicker() {
+      this.$refs.myPicker.show();
+    },
+
+    // 关闭picker
+    closeDatetimePicker() {
+      this.$refs.myPicker.hide();
+    },
+
+    handleSubmit(e) {
+      // console.log(e);
+      // {year: "2023", month: "07", day: "11", hour: "15", minute: "21", seconds: '55'}
+      this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${seconds}`;
+    },
+  },
+};
+```
+
+> Note: 不要把组件放 swiper 里面或者 v-for 里面等, 最好放在页面根部. 通常情况下打开 picker 需要调用`this.$refs.refName.show()`, 在选择完毕后 picker 会自动隐藏，不需要调用`this.$refs.refName.hide()`来手动隐藏。
+
+## 属性说明
+
+#### start-year
+
+类型 `Number`，选择开始年份
+
+#### end-year
+
+类型 `Number`, 选择结束年份
+
+#### time-init
+
+类型`Number`, 自定义初始时间, 默认为当前时间, 值为时间戳
+
+#### time-hidden
+
+类型 `Array`, 自定义时间列显示，默认显示年月日日分 `[true, true, true, true, true, false]`
+
+- 只显示年月日, 则可以设置为`[true, true, true, false, false, false]`
+- 时分秒, 则可以设置为`[false, false, false, true, true, true]`
+
+#### time-label
+
+类型 `Array`, 自定义各个时间单位，默认为 `['年', '月', '日', '时', '分', '秒']`, 比如想切换成显示英文的年月日, 可以设置 `['year', 'month', 'day', 'hour', 'minute', 'second']`
+
+#### @submit
+
+类型 `function`, 监听选择事件, 回调函数的第一个参数包含了选择时间的完整信息