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 值的信息了 然后根据毫秒值 转换成你需要的值急好了。 当你上下滑动之后 那么你选择的就是当前获取的年月值的 毫秒值。