rover95 / wxapp-timepicker Goto Github PK
View Code? Open in Web Editor NEW微信小程序自定义日期时间选择器,可限制时间范围,调整时间精度日期或时分秒,自定义选择器样式。weApp-picker | time-picker
微信小程序自定义日期时间选择器,可限制时间范围,调整时间精度日期或时分秒,自定义选择器样式。weApp-picker | time-picker
配置如下:
pickerConfig: {
endDate: false,
column: "minute",
dateLimit: true,
yearStart: 2019,
yearEnd: 2019,
initStartTime: "2019-01-16 12:32:44",
limitStartTime: "2019-01-16 12:32:44",
limitEndTime: "2019-01-17 23:32:44"
}
并且设置默认时间没有效果
RT
在同一个页面有时候 需要结束时间可选也可以不可选。我觉得可以动态配置 endTime参数会更好。这样就不用重复引用组件了。其他配置也是一样,可以动态配置会更好
js中的compareTime方法
compareTime(val, type) {
let h = val[3] ? this.data.HourList[val[3]] : "00";
let m = val[4] ? this.data.MinuteList[val[4]] : "00";
let s = val[5] ? this.data.SecondList[val[5]] : "00";
// 设置时列表
for (let i = 8; i <= 22; i++) {
if (0 <= i && i < 10) {
i = "0" + i;
}
HourList.push(i);
}
如果把HourList修改为8点开始而不是0点开始
则val[3]为0时, h就取不到HourList里的值了,结果不是8而是00
如题。并且时间变成了2000年1月 00时00分00秒 。中间日那一列消失了。
在config改变的时候,能重新初始化,基于某些场景,一个组件改变后,需要改同一个timePicker的默认时间,以及时间范围等等选项
打开后事件穿透 时间不能选择
selectStartTime: function(event) {
let startTime = this.data.startTime;//data中的查询开始时间
let endTime = this.data.endTime;//data中的查询截止时间
//初始时间、初试时间限制时间、截止时间、截止时间限制
let initStartT, limitStartT, limitEndT;
if (startTime) {//如果data中的开始时间不为空:
initStartT = startTime;//那么弹出的picker时间默认就为data中的开始时间
} else {//没有那就默认为当天零点
initStartT = util.zeroDatetimeBeforeOrAfterToday(0);
}
if (endTime) { //如果data中的截止时间不为空
limitEndT = endTime; //那么开始时间就限制不能超过截止时间
} else { //data截止时间没有
limitEndT = util.pointedFormatDatetime(new Date(), "-");//默认截止到现在
}
console.log("开始时间picker", initStartT, limitStartT);
this.setData({
pickerConfig: {
endDate: false,
column: "second",
dateLimit: true,
initStartTime: initStartT, //picker初始时间,默认当前时间
initEndTime: initStartT,//picker初始结束时间,默认当前时间
limitStartTime: "2018-01-01 00:00:00",//最小可选时间
limitEndTime: limitEndT//最大可选时间
}
});
console.log(this.data.pickerConfig.initStartTime);
this.pickerShow();
},
如上代码,在弹出picker时间控件后我操作了一下,设置了一个和initStartTime不一样的时间,然后点击取消,再次进来的时候picker显示的不是initStartTime,而是我上次一操作取消了的那个时间。
data:{
timePickerConfig: {
endDate: false, //这里禁用了结束时间
column: "minute",
dateLimit: false,
limitStartTime: "2015-05-06 12:32:44",
limitEndTime: "2055-05-06 12:32:44"
},
}
因为只想用一个时间选择器,所以配置了禁用结束时间,但是出现的时间选择会比当前的时间少一天,
比如今天是11-15日,但是timepicker默认选择的是11-14日,
我想你原本有开始和结束的时间时,会在开始时间上默认选中前一天的日期,
那我现在禁用结束的picker,怎么让默认的时间不提前呢?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.