第一次提交
This commit is contained in:
113
component/picker/GetDate.js
Normal file
113
component/picker/GetDate.js
Normal file
@@ -0,0 +1,113 @@
|
||||
const GetDate = {
|
||||
withData: (param) => {
|
||||
return param < 10 ? '0' + param : '' + param;
|
||||
},
|
||||
getTimes(str){
|
||||
return new Date(str.replace(/-/g,'/')).getTime();
|
||||
},
|
||||
format(arr){
|
||||
let curarr = [];
|
||||
let curarr0 = [];
|
||||
let str = '';
|
||||
arr.forEach((o,index) => {
|
||||
if(index > 2){
|
||||
curarr.push(o);
|
||||
}else{
|
||||
curarr0.push(o)
|
||||
}
|
||||
})
|
||||
if(arr.length < 4){
|
||||
str = arr.join('-')
|
||||
}else{
|
||||
str = curarr0.join('-') + ' ' + curarr.join(':')
|
||||
}
|
||||
return str;
|
||||
},
|
||||
getLoopArray: (start, end) => {
|
||||
var start = start || 0;
|
||||
var end = end || 1;
|
||||
var array = [];
|
||||
for (var i = start; i <= end; i++) {
|
||||
array.push(GetDate.withData(i));
|
||||
}
|
||||
return array;
|
||||
},
|
||||
getMonthDay: (year, month) => {
|
||||
var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
|
||||
|
||||
switch (month) {
|
||||
case '01':
|
||||
case '03':
|
||||
case '05':
|
||||
case '07':
|
||||
case '08':
|
||||
case '10':
|
||||
case '12':
|
||||
array = GetDate.getLoopArray(1, 31)
|
||||
break;
|
||||
case '04':
|
||||
case '06':
|
||||
case '09':
|
||||
case '11':
|
||||
array = GetDate.getLoopArray(1, 30)
|
||||
break;
|
||||
case '02':
|
||||
array = flag ? GetDate.getLoopArray(1, 29) : GetDate.getLoopArray(1, 28)
|
||||
break;
|
||||
default:
|
||||
array = '月份格式不正确,请重新输入!'
|
||||
}
|
||||
return array;
|
||||
},
|
||||
getDateTimes: (opts) => {
|
||||
var years = GetDate.getLoopArray(opts.start, opts.end);
|
||||
var months = GetDate.getLoopArray(1, 12);
|
||||
var days = GetDate.getLoopArray(1, 31);
|
||||
var hours = GetDate.getLoopArray(0, 23);
|
||||
var minutes = GetDate.getLoopArray(0, 59);
|
||||
var seconds = GetDate.getLoopArray(0, 59);
|
||||
var times = null;
|
||||
|
||||
switch (opts.fields) {
|
||||
case 'year':
|
||||
times = [years]
|
||||
break;
|
||||
case 'month':
|
||||
times = [years, months]
|
||||
break;
|
||||
case 'day':
|
||||
times = [years, months, days]
|
||||
break;
|
||||
case 'hour':
|
||||
times = [years, months, days, hours]
|
||||
break;
|
||||
case 'minute':
|
||||
times = [years, months, days, hours, minutes]
|
||||
break;
|
||||
case 'second':
|
||||
times = [years, months, days, hours, minutes, seconds]
|
||||
break;
|
||||
default:
|
||||
times = [years, months, days, hours, minutes, seconds]
|
||||
}
|
||||
return times;
|
||||
},
|
||||
getIndex(arr,target){
|
||||
let len = arr.length;
|
||||
for(let i = 0; i < len; i++){
|
||||
if(arr[i] == target){
|
||||
return i;
|
||||
}
|
||||
}
|
||||
},
|
||||
getTimeIndex(arrs, targets){
|
||||
let len = arrs.length;
|
||||
let arr = [];
|
||||
for(let i = 0; i < len; i++){
|
||||
arr.push(GetDate.getIndex(arrs[i], targets[i]))
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = GetDate;
|
||||
172
component/picker/picker.js
Normal file
172
component/picker/picker.js
Normal file
@@ -0,0 +1,172 @@
|
||||
const GetDate = require('./GetDate.js');
|
||||
|
||||
const error = (msg) => {
|
||||
console.error(msg);
|
||||
};
|
||||
|
||||
Component({
|
||||
externalClasses: ['rui-class'],
|
||||
|
||||
options: {
|
||||
multipleSlots: true
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
switch (this.data.fields){
|
||||
case 'year':
|
||||
if (this.data.value.length !== 4) {error('时间粒度和时间格式不一致');this.setData({ disabled: true });return false;}
|
||||
if (this.data.start.length !== 4) { error('时间粒度和开始时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.end.length !== 4) { error('时间粒度和结束时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
break;
|
||||
case 'month':
|
||||
if (this.data.value.length !== 7) { error('时间粒度和时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.start.length !== 7) { error('时间粒度和开始时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.end.length !== 7) { error('时间粒度和结束时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
break;
|
||||
case 'day':
|
||||
if (this.data.value.length !== 10) { error('时间粒度和时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.start.length !== 10) { error('时间粒度和开始时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.end.length !== 10) { error('时间粒度和结束时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
break;
|
||||
case 'hour':
|
||||
if (this.data.value.length !== 13) { error('时间粒度和时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.start.length !== 13) { error('时间粒度和开始时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.end.length !== 13) { error('时间粒度和结束时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
break;
|
||||
case 'minute':
|
||||
if (this.data.value.length !== 16) { error('时间粒度和时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.start.length !== 16) { error('时间粒度和开始时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.end.length !== 16) { error('时间粒度和结束时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
break;
|
||||
case 'second':
|
||||
if (this.data.value.length !== 19) { error('时间粒度和时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.start.length !== 19) { error('时间粒度和开始时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
if (this.data.end.length !== 19) { error('时间粒度和结束时间格式不一致'); this.setData({ disabled: true }); return false;}
|
||||
break;
|
||||
default:
|
||||
error('时间粒度不存在')
|
||||
break;
|
||||
}
|
||||
let values = this.data.value.split(' ');
|
||||
let targets = this.data.fields === 'year' || this.data.fields === 'month' || this.data.fields === 'day' ? [...(values[0].split('-'))] : [...(values[0].split('-')), ...(values[1].split(':'))];
|
||||
|
||||
if (GetDate.getTimes(this.data.value) < GetDate.getTimes(this.data.start)){
|
||||
error('默认时间不能小于开始时间')
|
||||
this.setData({ disabled: true })
|
||||
return false;
|
||||
}
|
||||
if (GetDate.getTimes(this.data.value) > GetDate.getTimes(this.data.end)) {
|
||||
error('默认时间不能大于开始时间')
|
||||
this.setData({ disabled: true })
|
||||
return false;
|
||||
}
|
||||
let times = GetDate.getDateTimes({
|
||||
start: this.data.start.substring(0, 4),
|
||||
end: this.data.end.substring(0, 4),
|
||||
curyear: this.data.value.substring(0, 4),
|
||||
curmonth: this.data.value.substring(5, 7),
|
||||
fields: this.data.fields,
|
||||
})
|
||||
let timesIndex = GetDate.getTimeIndex(times, targets);
|
||||
let timesString = [];
|
||||
timesIndex.forEach(o => timesString.push(o));
|
||||
|
||||
this.setData({
|
||||
times: times,
|
||||
timesIndex: timesIndex,
|
||||
timesString: timesString
|
||||
})
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
start: {
|
||||
type: String,
|
||||
value: '1900-00-00 00:00:00'
|
||||
},
|
||||
end: {
|
||||
type: String,
|
||||
value: '2500-12-30 23:59:59'
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
value: '2019-03-15 10:45:00'
|
||||
},
|
||||
fields: {
|
||||
type: String,
|
||||
value: 'second'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
times:[['2019','2020'],['01','02']],
|
||||
timesIndex: [1,1],
|
||||
timesString: null
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeDate(e){
|
||||
let values = e.detail.value;
|
||||
let times = this.data.times;
|
||||
let curarr = [];
|
||||
for (let i = 0, len = values.length; i < len; i++) {
|
||||
curarr.push(times[i][values[i]])
|
||||
}
|
||||
let str = GetDate.format(curarr);
|
||||
this.setData({ value: str});
|
||||
this.triggerEvent('changedatepicker', { value: str }, {});
|
||||
},
|
||||
columnchangeDate(e){
|
||||
if ((this.data.fields === 'year' || this.data.fields === 'month')){
|
||||
let timesIndex = this.data.timesIndex;
|
||||
timesIndex[e.detail.column] = e.detail.value;
|
||||
this.setData({ timesIndex: timesIndex });
|
||||
return false;
|
||||
}
|
||||
// 先对timesIndex做出改变
|
||||
if ((e.detail.column === 0 || e.detail.column === 1 || e.detail.column === 2) && (this.data.fields !== 'year' || this.data.fields !== 'month')) {
|
||||
let times = this.data.times;
|
||||
let timesIndex = this.data.timesIndex;
|
||||
timesIndex[e.detail.column] = e.detail.value;
|
||||
let days = GetDate.getMonthDay(times[0][timesIndex[0]], times[1][timesIndex[1]]);
|
||||
if (timesIndex[2] >= days.length) {
|
||||
timesIndex[2] = days.length - 1;
|
||||
} else {
|
||||
timesIndex[e.detail.column] = e.detail.value;
|
||||
}
|
||||
this.setData({ timesIndex: timesIndex });
|
||||
} else {
|
||||
let timesIndex = this.data.timesIndex;
|
||||
timesIndex[e.detail.column] = e.detail.value;
|
||||
this.setData({ timesIndex: timesIndex });
|
||||
}
|
||||
// 判断当前选择是否小于开始时间或者大于结束时间
|
||||
let values = this.data.timesIndex;
|
||||
let times = this.data.times;
|
||||
let curarr = [];
|
||||
for (let i = 0, len = values.length; i < len; i++) {
|
||||
curarr.push(times[i][values[i]])
|
||||
}
|
||||
let str = GetDate.format(curarr);
|
||||
|
||||
if (GetDate.getTimes(str) < GetDate.getTimes(this.data.start)) {
|
||||
let timesString = this.data.timesString;
|
||||
let timesIndex = [];
|
||||
timesString.forEach(o => timesIndex.push(o));
|
||||
this.setData({ timesIndex: timesIndex})
|
||||
}
|
||||
if (GetDate.getTimes(str) > GetDate.getTimes(this.data.end)) {
|
||||
let timesString = this.data.timesString;
|
||||
let timesIndex = [];
|
||||
timesString.forEach(o => timesIndex.push(o));
|
||||
this.setData({ timesIndex: timesIndex })
|
||||
}
|
||||
},
|
||||
cancelDate(e){
|
||||
this.triggerEvent('canceldatepicker', { value: e }, {});
|
||||
}
|
||||
}
|
||||
})
|
||||
5
component/picker/picker.json
Normal file
5
component/picker/picker.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
}
|
||||
}
|
||||
5
component/picker/picker.wxml
Normal file
5
component/picker/picker.wxml
Normal file
@@ -0,0 +1,5 @@
|
||||
<!--component/picker/picker.wxml-->
|
||||
<picker class='rui-picker rui-class' mode="multiSelector" range="{{times}}" value="{{timesIndex}}" disabled="{{disabled}}" bindchange='changeDate' bindcancel="cancelDate" bindcolumnchange="columnchangeDate">
|
||||
{{value}}
|
||||
</picker>
|
||||
|
||||
14
component/picker/picker.wxss
Normal file
14
component/picker/picker.wxss
Normal file
@@ -0,0 +1,14 @@
|
||||
/* component/picker/picker.wxss */
|
||||
.rui-picker{
|
||||
height: 10vw;
|
||||
font-size: 4vw;
|
||||
color: #000;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #aaa;
|
||||
flex-grow: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
98
component/picker/readme.md
Normal file
98
component/picker/readme.md
Normal file
@@ -0,0 +1,98 @@
|
||||
### 使用
|
||||
|
||||
> 到 [GitHub](https://github.com/Rattenking/WXTUI-DEMO) 下载 WX-RUI 的代码,将 component 目录拷贝到自己的项目中。然后按照如下的方式使用组件,以 dtpicker 为例,其它组件在对应的文档页查看:
|
||||
|
||||
#### 1. 添加需要的组件。在页面的 json 中配置(路径根据自己项目位置配置):
|
||||
|
||||
```
|
||||
"usingComponents": {
|
||||
"rui-dtpicker": "../../component/picker/picker"
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. 在 wxml 中使用组件:
|
||||
|
||||
2.1 时间粒度为second的实例
|
||||
|
||||
```
|
||||
<rui-dtpicker
|
||||
start="2018-03-15 10:45:00"
|
||||
end="2050-03-15 10:45:00"
|
||||
value="{{value}}"
|
||||
fields="second"
|
||||
bindchangedatepicker="changeDate"
|
||||
bindcanceldatepicker="cancelDate"
|
||||
></rui-dtpicker>
|
||||
```
|
||||
2.2 时间粒度为year的实例
|
||||
|
||||
```
|
||||
<rui-dtpicker
|
||||
start="2018"
|
||||
end="2050"
|
||||
value="{{value}}"
|
||||
fields="year"
|
||||
bindchangedatepicker="changeDate"
|
||||
bindcanceldatepicker="cancelDate"
|
||||
></rui-dtpicker>
|
||||
```
|
||||
### 效果图
|
||||
<img src="https://img-blog.csdnimg.cn/20190325095929896.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDgyNzgz,size_16,color_FFFFFF,t_70" width="320px"/>
|
||||
|
||||
<img src="https://img-blog.csdnimg.cn/20190325100352104.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDgyNzgz,size_16,color_FFFFFF,t_70" width="320px"/>
|
||||
|
||||
|
||||
### 参数说明
|
||||
**rui-dtpicker 属性说明:**
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|--- |---- |--- |--- |
|
||||
|start |String |'1900-00-00 00:00:00' |限制选择器选择的最小时间 |
|
||||
|end |String |'2500-12-30 23:59:59' |限制选择器选择的最大时间 |
|
||||
|value |String |'2019-03-15 10:45:00' |当前时间选择器显示的时间 |
|
||||
|fields |String |'second' |时间选择器的粒度 |
|
||||
|disabled |Boolean|false |是否为禁用状态 |
|
||||
|
||||
**fields 值说明:**
|
||||
|
||||
|值 |类型 |说明 |
|
||||
|--- |---- |--- |
|
||||
|year |String |选择器粒度为年 |
|
||||
|month |String |选择器粒度为月份 |
|
||||
|day |String |选择器粒度为天 |
|
||||
|hour |String |选择器粒度为小时 |
|
||||
|minute |String |选择器粒度为分钟 |
|
||||
|second |String |选择器粒度为秒 |
|
||||
|
||||
**事件说明:**
|
||||
|
||||
|事件名称 |说明 |
|
||||
|---|---|
|
||||
|change |时间选择器点击【确定】按钮时时触发的事件,参数为picker的当前的 value|
|
||||
|cancel |时间选择器点击【取消】按钮时时触发的事件|
|
||||
|
||||
### WXRUI体验二维码
|
||||

|
||||
##### 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
|
||||
|
||||
### 其他
|
||||
|
||||
[我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)
|
||||
|
||||
[我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)
|
||||
|
||||
[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)
|
||||
|
||||
[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)
|
||||
|
||||
[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)
|
||||
|
||||
[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)
|
||||
|
||||
[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)
|
||||
|
||||
[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)
|
||||
|
||||
[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)
|
||||
|
||||
[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)
|
||||
Reference in New Issue
Block a user