Vant Weapp DatetimePicker 微信小程序 时间选择 设置只能选择当天到前一天的时间限制

Vant Weapp DatetimePicker 微信小程序 时间选择 设置只能选择当天到前一天的时间限制
微信小程序 我的项目 需要设置时间 为 选择当天和前一天12:00以后的时间。那么如何设置呢?文档里面有一个最大值和最小值
这是示例代码

选择完整时间
value 为时间戳


Page({
  data: {
    minHour: 10,
    maxHour: 20,
    minDate: new Date().getTime(),
    maxDate: new Date(2019, 10, 1).getTime(),
    currentDate: new Date().getTime()
  },

  onInput(event) {
    this.setData({
      currentDate: event.detail
    });
  }
});

其中 minDate 可选的最小时间,精确到分钟 和 maxDate 可选的最大时间,精确到分钟
其实主要就是这两个值的变化就行了 其他都不需要管了。
我这里举两个例子 你拿去试下 明白了。

minDate:new Date(new Date(new Date().toLocaleDateString()).getTime()).valueOf()-43200000, 
//解释一下  这里微信用的是 毫秒值 
// .valueOf() 就得到毫秒值了 
1. 获取当天开始时间 
new Date(new Date(new Date().toLocaleDateString()).getTime()).valueOf()
//我这里-43200000 是12个小时的毫秒数  就是前一天的12:00  我们项目这样的要求  那你需要的话可以自己随意设置时间。
2.  获取当天结束时间
maxDate:new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).valueOf(),
3.  获取目前的时间  new Date().getTime() 
4. 其他的时间段自己网上去搜下了 只有
5. 就这么多了。我把我自己的代码给你 贴出来
<div class="bind-content-line">
        <p class="bind-content-left">采价时间</p>
        <div class="bind-content-right">
          <span @click="seceletTime">{{nowTime}}</span>
          <van-popup
            :show="isshowtime"
            @close="isshow = false"
            position="bottom"
          >
            <van-datetime-picker
              type="datetime"
              :value="currentDate"
              :min-date="minDate"
              :max-date="maxDate"
              
              @confirm="enterTime"
              @cancel="cancelTime"
            />
          </van-popup>
          <img
            class="flush"
            src="../../../static/images/[email protected]"
            @click="flushtime"
          >
        </div>
      </div>
      export default {
  data() {
    return {
    //变量自己定义哈 我可能复制的不全
    minDate:new Date(new Date(new Date().toLocaleDateString()).getTime()).valueOf()-43200000,
      // maxDate:new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).valueOf(),
      maxDate:new Date().getTime(),
      currentDate: new Date().getTime(),
      isshow: false,
      isshowgm: false,
      isshowself: false,
    		}
    	}
   methods:{
    	
    	cancelTime() {
      this.isshowtime = false;
    },
    enterTime(e) {
      this.nowTime=this.changeTime(e.mp.detail)
      this.isshowtime = false;
    },
    seceletTime() {
      this.isshowtime = true;
    },
     // 毫秒转换成 日期时间 格式“yyyy-MM-dd HH:MM:SS”
    changeTime(time) {
      if (time) {
        var oDate = new Date(time * 1),
          oYear = oDate.getFullYear(),
          oMonth = oDate.getMonth() + 1,
          oDay = oDate.getDate(),
          oHour = oDate.getHours(),
          oMin = oDate.getMinutes(),
          oSen = oDate.getSeconds(),
          oTime =
            oYear +
            "-" +
            this.getBz(oMonth) +
            "-" +
            this.getBz(oDay) +
            " " +
            this.getBz(oHour) +
            ":" +
            this.getBz(oMin) +
            ":" +
            this.getBz(oSen); //拼接时间
        return oTime;
      } else {
        return "";
      }
    },
    //补0
    getBz(num) {
      if (parseInt(num) < 10) {
        num = "0" + num;
      }
      return num;
    },
    }
    }

再补充一个 获取当前 年月的毫秒值 currentDate: new Date(new Date().getFullYear(),new Date().getMonth()).getTime(),//默认值获取当前年月的毫秒值
这个 currentDate 就是标签中 的 :value=“currentDate” 这个默认值我们可以自己定位到获取当前时间的 年月日 时分秒 格式的 毫秒值 因为 vant里面 的值全是毫秒值 自己定义就好 ,我这里事获取当前年月的毫秒值 然后当我 弹框之后 不滑动事件选择器 直接点击确定键 就可以获取到currentDate 值的信息了 然后根据毫秒值 转换成你需要的值急好了。 当你上下滑动之后 那么你选择的就是当前获取的年月值的 毫秒值。

你可能感兴趣的:(vue)