第一次提交

This commit is contained in:
2023-02-18 16:24:17 +08:00
parent dceb736e33
commit 53aeac7bfe
1270 changed files with 45215 additions and 0 deletions

113
component/picker/GetDate.js Normal file
View 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
View 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 }, {});
}
}
})

View File

@@ -0,0 +1,5 @@
{
"component": true,
"usingComponents": {
}
}

View 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>

View 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;
}

View 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体验二维码
![WXRUI体验码](https://img-blog.csdnimg.cn/20190220140113256.jpg)
##### 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
### 其他
[我的博客,欢迎交流!](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)