vant-ui,van-datetime-picker时间选择器只选择年,选择年月日时分秒

只选择年

this.$nextTick(() => {
  if (this.listItem.grid_format === "yyyy") {
    // 判断如果只需要选择年的时候删除月份列
    let columns = this.$el.querySelectorAll(
      ".van-picker__columns .van-picker-column"
    );
    if (columns.length === 2) {
      columns[1].parentElement.removeChild(columns[1]);
    }
  }
});

这个代码放在 van-popup 弹出层弹出时

效果:

选择年月日时分秒

vant-ui的DatetimePicker 组件只能选择年月日时分,可能是组件维护者认为秒的选择用途不多,但是今天的需求中就是需要选择年月日时分秒所以就对DatetimePicker的组件封装成了可以选择年月日时分秒。

先看效果:

封装成组件:

<template>
  <div>
    <!-- 弹出层 -->
    <van-popup
      get-container="body"
      v-model="isPicker"
      position="bottom"
      @close="confirmOn"
    >
      <!-- 时间选择 -->
      <div v-if="isPicker">
        <van-picker
          ref="picker"
          show-toolbar
          :title="title"
          :columns="columns"
          @change="onChange"
          @cancel="cancelOn"
          @confirm="onConfirm"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "popup",
  props: {
    showPicker: {
      type: Boolean,
      default: false,
    },
    values: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "请选择时间",
    },
    "value-format": {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss",
    },
  },
  data() {
    return {
      isPicker: false, //是否显示弹出层
      columns: [],
      //所有时间
      Mdays: "", //弹窗关闭时月份所在值
      Dindex: null,
    };
  },
  watch: {
    isPicker(val) {
      !val && this.$emit("changeValue");
      this.columns = [];
      this.getcolumns();
    },
    showPicker(val) {
      this.isPicker = val;
    },
    values(val) {
      if (val == "") {
        this.Mdays = "";
        this.Dindex = null;
      }
    },
  },
  methods: {
    getCountDays(year, month) {
      //获取某年某月多少天
      var day = new Date(year, month, 0);
      return day.getDate();
    },
    getcolumns() {
      var strtime = this.values;
      if (this.values != "") {
        var vmoduledate = new Date(strtime.replace(/-/g, "/"));
      } else {
        var vmoduledate = new Date(); //没有传入时间则默认当前时刻
      }
      var Y = vmoduledate.getFullYear();
      var M = vmoduledate.getMonth();
      var D = vmoduledate.getDate();
      var h = vmoduledate.getHours();
      var m = vmoduledate.getMinutes();
      var s = vmoduledate.getSeconds();
      var year = {}; //获取前后十年数组
      year.values = [];
      var Currentday = new Date().getFullYear();
      for (var i = Currentday - 10; i < Currentday + 10; i++) {
        year.values.push(i);
      }
      year.defaultIndex = year.values.indexOf(Y);

      var month = {};
      //获取12月数组
      month.defaultIndex = M;
      month.values = Object.keys(Array.apply(null, { length: 13 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item;
          } else if (+item + 1 == 11) {
            return +item;
          } else {
            return (+item + 0).toString();
          }
        }
      );
      month.values.splice(0, 1);
      var days = this.getCountDays(Y, this.Mdays == "" ? M + 1 : this.Mdays);
      var day = {}; //创建当月天数数组
      day.defaultIndex = this.Dindex == null ? D - 1 : this.Dindex;
      day.values = Object.keys(Array.apply(null, { length: days + 1 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item;
          } else if (+item + 1 == 11) {
            return +item;
          } else {
            return (+item + 0).toString();
          }
        }
      );
      day.values.splice(0, 1);
      var hour = {}; //创建小时数组
      hour.defaultIndex = h;
      hour.values = Object.keys(Array.apply(null, { length: 24 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item;
          } else if (+item + 1 == 11) {
            return +item;
          } else {
            return (+item + 0).toString();
          }
        }
      );
      var mi = {}; //创建分钟数组
      mi.defaultIndex = m;
      mi.values = Object.keys(Array.apply(null, { length: 60 })).map(function (
        item
      ) {
        if (+item + 1 <= 10) {
          return "0" + item;
        } else if (+item + 1 == 11) {
          return +item;
        } else {
          return (+item + 0).toString();
        }
      });
      var ss = {}; //创建秒数数组
      ss.defaultIndex = s;
      ss.values = Object.keys(Array.apply(null, { length: 60 })).map(function (
        item
      ) {
        if (+item + 1 <= 10) {
          return "0" + item;
        } else if (+item + 1 == 11) {
          return +item;
        } else {
          return (+item + 0).toString();
        }
      });
      //设置默认选项当前年
      if (this.valueFormat.includes("yyyy")) {
        this.columns.push(year);
      }
      if (this.valueFormat.includes("MM")) {
        this.columns.push(month); //获取当月的天数
      }
      if (this.valueFormat.includes("dd")) {
        this.columns.push(day);
      }
      if (this.valueFormat.includes("HH")) {
        this.columns.push(hour);
      }
      if (this.valueFormat.includes("mm")) {
        this.columns.push(mi);
      }
      if (this.valueFormat.includes("ss")) {
        this.columns.push(ss);
      }
    },
    onChange(values, a) {
      //a为所有列备选项值的数组
      var days = this.getCountDays(a[0], a[1]);
      var newdays = {};
      newdays.values = Object.keys(Array.apply(null, { length: days + 1 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item;
          } else if (+item + 1 == 11) {
            return +item;
          } else {
            return (+item + 0).toString();
          }
        }
      );
      newdays.values.splice(0, 1);
      this.$refs.picker.setColumnValues(2, newdays.values); //设置第三列的值
      this.$refs.picker.setColumnIndex(2, a[2] - 1); //设置第三列索引
    }, // 关闭弹框
    confirmOn() {
      var currentM = this.$refs.picker.getColumnValue(1);
      this.Mdays = currentM.substr(0, 2);
      this.Dindex = this.$refs.picker.getColumnIndex(2);
    },
    //时间选择器关闭
    cancelOn() {
      this.$emit("changeValue");
    },
    // 时间选择器确定
    onConfirm(val, index) {
      let endval = "";

      for (let i = 0; i < this.columns.length; i++) {
        endval += val[i];
        if (i === 2) {
          endval += " ";
        } else if (i >= 3 && i <= 5) {
          endval += ":";
        } else if (i < this.columns.length - 1) {
          endval += "-";
        }
      }
      // 判断最后一个字符是否是分隔符
      if (endval.endsWith("-") || endval.endsWith(":")) {
        endval = endval.slice(0, -1); // 删除最后一个字符
      }
      this.$emit("changeValue", endval);
      this.$emit("confirm", endval);
    },
  },
};
</script>

引入:

import DatetimePicker from "@/components/common/datetimePicker";

components: {
  DatetimePicker,
},

调用:

<DatetimePicker
  :values="time"
  @changeValue="timeShow = false"
  ref="popup"
  :showPicker="timeShow"
  @confirm="selectTime"
/>
 
data() {
  time: "",
  timeShow:false
},
methods: {
 selectTime(val) {
   this.time = val
   console.log(val)
 },
}

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue2中使用Vant实现时间选择器,需要先安装Vant组件库,然后在Vue组件中引入相关的时间选择器组件。 首先,在命令行中使用以下命令安装Vant: ``` npm install vant@next -S ``` 然后在Vue组件中引入相关的时间选择器组件,例如: ```vue <template> <div> <van-popup v-model="showPicker" position="bottom"> <van-datetime-picker ref="picker" type="datetime" :min-date="minDate" :max-date="maxDate" :value="currentDate" @confirm="onConfirm" /> </van-popup> <van-button type="primary" @click="showPicker = true">选择时间</van-button> </div> </template> <script> export default { data() { return { showPicker: false, currentDate: new Date(), minDate: new Date(2010, 0, 1), maxDate: new Date(2022, 11, 31), }; }, methods: { onConfirm(value) { this.currentDate = value; this.showPicker = false; }, }, }; </script> ``` 在上面的代码中,我们使用了Vant的`van-popup`组件来实现时间选择器的弹出框。我们设置了`position`为`bottom`,表示弹出框从底部弹出。我们还使用了`v-model`来控制弹出框的显示与隐藏。 在弹出框中,我们使用了`van-datetime-picker`组件来实现时间选择器。我们设置了组件的`type`为`datetime`,表示选择的是日期和时间。我们还设置了`min-date`和`max-date`来限制可选的时间范围。我们使用了`value`来设置当前的时间值。当用户点击确认按钮时,会触发`@confirm`事件,我们在`onConfirm`方法中将选择时间值赋给`currentDate`,并将弹出框隐藏起来。 最后,我们在页面上放置了一个按钮,当用户点击该按钮时,弹出框会从底部弹出,让用户可以选择时间。 以上就是使用Vant实现时间选择器的基本步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值