Skip to content

Commit d288161

Browse files
juzi214032juzi214032
committed
feat(Calendar): 新增日历组件
1 parent 21ca86f commit d288161

31 files changed

+1293
-2
lines changed

‎commitlint.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ module.exports = {
7373
'Circle',
7474
'ImageClipper',
7575
'TabBar',
76-
'DynamicBuild'
76+
'DynamicBuild',
77+
'Calendar'
7778
]
7879
]
7980
}

‎examples/app.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@
101101
"pages/image-clipper/index",
102102
"pages/rules/index",
103103
"pages/rate/index",
104-
"pages/form/index"
104+
"pages/form/index",
105+
"pages/calendar/index"
105106
]
106107
},
107108
{

‎examples/pages/components/form/pages/calendar/index.js‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
2+
Page({
3+
4+
/**
5+
* 页面的初始数据
6+
*/
7+
data: {
8+
defaultDate: 1589524969397,
9+
show: false,
10+
minSelect: '',
11+
maxSelect: '',
12+
type: 'single',
13+
title: '',
14+
color: '',
15+
maxDate: '',
16+
minDate: '',
17+
confirmText: '',
18+
formatter: '',
19+
base_single: {
20+
defaultDate: 1589524969397,
21+
minSelect: '',
22+
maxSelect: '',
23+
type: 'single',
24+
title: '选择单个日期'
25+
},
26+
base_range: {
27+
defaultDate: [],
28+
minSelect: '',
29+
maxSelect: '',
30+
type: 'range',
31+
title: '选择日期范围'
32+
},
33+
base_multiple: {
34+
defaultDate: [],
35+
minSelect: '',
36+
maxSelect: '',
37+
type: 'multiple',
38+
title: '选择多个日期'
39+
},
40+
custom_color: {
41+
defaultDate: [],
42+
minSelect: '',
43+
maxSelect: '',
44+
color: '#ff7487',
45+
type: 'range',
46+
title: '自定义颜色'
47+
},
48+
custom_range: {
49+
defaultDate: [],
50+
minSelect: '',
51+
maxSelect: '',
52+
type: 'range',
53+
title: '自定义日期范围',
54+
maxDate: new Date().setDate(new Date().getDate() + 30),
55+
minDate: new Date().setDate(new Date().getDate() - 30)
56+
},
57+
custom_confirmtext: {
58+
defaultDate: [],
59+
minSelect: '',
60+
maxSelect: '',
61+
type: 'range',
62+
title: '自定按钮文字',
63+
confirmText: '确认选中'
64+
},
65+
custom_date: {
66+
defaultDate: [],
67+
minSelect: '',
68+
maxSelect: '',
69+
type: 'range',
70+
title: '自定义日期文案',
71+
formatter: (day) => {
72+
const item = new Date(day.date);
73+
const current = new Date();
74+
75+
const month = item.getMonth() + 1;
76+
const date = item.getDate();
77+
78+
if(current.getMonth() === item.getMonth() && current.getDate() === item.getDate()){
79+
day.text = '今天';
80+
}
81+
82+
if (month === 1) {
83+
if (date === 1) {
84+
day.topInfo = '元旦节';
85+
}
86+
}
87+
88+
if (month === 2) {
89+
if (date === 14) {
90+
day.topInfo = '情人节';
91+
}
92+
}
93+
94+
if (month === 3) {
95+
if (date === 8) {
96+
day.topInfo = '妇女节';
97+
}
98+
}
99+
100+
if (month === 4) {
101+
if (date === 1) {
102+
day.topInfo = '愚人节';
103+
}
104+
}
105+
106+
if (month === 5) {
107+
if (date === 1) {
108+
day.topInfo = '劳动节';
109+
} else if (date === 4) {
110+
day.topInfo = '青年节';
111+
}
112+
}
113+
114+
if (month === 6) {
115+
if (date === 1) {
116+
day.topInfo = '儿童节';
117+
}
118+
}
119+
120+
if (month === 8) {
121+
if (date === 1) {
122+
day.topInfo = '建军节';
123+
}
124+
}
125+
126+
if (month === 10) {
127+
if (date === 1) {
128+
day.topInfo = '国庆节';
129+
}
130+
}
131+
132+
if (day.type === 'start') {
133+
day.bottomInfo = '入住';
134+
} else if (day.type === 'end') {
135+
day.bottomInfo = '离店';
136+
}
137+
138+
return day;
139+
140+
141+
// if (month === 5) {
142+
// if (date === 1) {
143+
// day.topInfo = '劳动节';
144+
// } else if (date === 4) {
145+
// day.topInfo = '青年节';
146+
// } else if (date === 11) {
147+
// day.text = '今天';
148+
// }
149+
// }
150+
151+
// if (day.type === 'start') {
152+
// day.bottomInfo = '入住';
153+
// } else if (day.type === 'end') {
154+
// day.bottomInfo = '离店';
155+
// }
156+
157+
// return day;
158+
}
159+
},
160+
custom_count: {
161+
defaultDate: [],
162+
minSelect: '4',
163+
maxSelect: '10',
164+
type: 'range',
165+
title: '自定义可选数量',
166+
},
167+
},
168+
169+
changeType(e) {
170+
const {defaultDate, minSelect, maxSelect, type, title, color = '', minDate = '', maxDate = '', confirmText='确定', formatter} = this.data[e.currentTarget.dataset.id];
171+
172+
this.setData({
173+
show: true,
174+
defaultDate,
175+
minSelect,
176+
maxSelect,
177+
type,
178+
title,
179+
color,
180+
maxDate,
181+
minDate,
182+
confirmText,
183+
formatter
184+
});
185+
},
186+
187+
selectCalender(e){
188+
console.info(e);
189+
}
190+
});

‎examples/pages/components/form/pages/calendar/index.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"usingComponents": {
3+
"l-calendar": "/dist/calendar/index",
4+
"l-list": "/dist/list/index"
5+
}
6+
}

‎examples/pages/components/form/pages/calendar/index.wxml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!--pages/view/pages/dialog/index.wxml-->
2+
<view class='container'>
3+
<content-title name="Calendar" describe="日历">
4+
5+
<content-card class="content" name="基础用法">
6+
<l-list title="选择单个日期" data-id="base_single" bind:lintap="changeType" />
7+
<l-list title="选择多个日期" data-id="base_multiple" bind:lintap="changeType" />
8+
<l-list title="选择日期范围" data-id="base_range" bind:lintap="changeType" />
9+
</content-card>
10+
11+
<content-card class="content" name="自定义日历">
12+
<l-list title="自定义颜色" data-id="custom_color" bind:lintap="changeType" />
13+
<!-- <l-list title="自定义日期范围" data-id="custom_range" bind:lintap="changeType" /> -->
14+
<l-list title="自定义按钮文字" data-id="custom_confirmtext" bind:lintap="changeType" />
15+
<l-list title="自定义日期文案" data-id="custom_date" bind:lintap="changeType" />
16+
<l-list title="自定义可选数量" data-id="custom_count" bind:lintap="changeType" />
17+
</content-card>
18+
19+
</content-title>
20+
21+
<l-calendar
22+
bind:linselect="selectCalender"
23+
title="{{ title }}"
24+
show="{{ show }}"
25+
minSelect="{{ minSelect }}"
26+
maxSelect="{{ maxSelect }}"
27+
defaultDate="{{ defaultDate }}"
28+
type="{{ type }}"
29+
color="{{ color }}"
30+
confirmText="{{ confirmText }}"
31+
formatter="{{ formatter }}"
32+
>
33+
</l-calendar>
34+
35+
</view>

‎examples/pages/components/form/pages/calendar/index.wxss‎

Whitespace-only changes.

‎examples/pages/navigator/content/config/form-navi.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ const formNaviConfigs = [
4141
desc: '评分',
4242
componentsPath: '/pages/components/form/pages/rate/index'
4343
},
44+
{
45+
icon: '/images/component/rate.png',
46+
title: 'Calendar',
47+
desc: '日历',
48+
componentsPath: '/pages/components/form/pages/calendar/index'
49+
},
4450
{
4551
icon: '/images/component/rules.png',
4652
title: 'Rules',

‎src/calendar/calendar.wxml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<wxs src="./index.wxs" module="computed"></wxs>
2+
3+
<template name="calendar">
4+
<view class="calendar-container">
5+
<header showTitle="{{ showTitle }}" showSubtitle="{{ showSubtitle }}" title="{{ title }}" subTitle="{{ subTitle }}"></header>
6+
<scroll-view class="calendar-body-wrap" scroll-y scroll-into-view="{{ scrollIntoViewIndex }}">
7+
<mounth
8+
wx:for="{{ computed.getMonths(minDate, maxDate) }}"
9+
wx:key="index"
10+
id="month{{ index }}"
11+
class="month"
12+
data-date="{{ item }}"
13+
date="{{ item }}"
14+
minDate="{{ minDate }}"
15+
maxDate="{{ maxDate }}"
16+
currentDate="{{ currentDate }}"
17+
type="{{ type }}"
18+
bind:clickDay="clickDay"
19+
showMonthTitle="{{ index !== 0 }}"
20+
formatter="{{ formatter }}"
21+
color="{{ color }}"
22+
>
23+
</mounth>
24+
</scroll-view>
25+
<view>
26+
<l-button type="default" size="long" bind:lintap="onClickConfirm" bg-color="{{ color }}">{{confirmText}}</l-button>
27+
</view>
28+
</view>
29+
</template>

‎src/calendar/components/day/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Component({
2+
data: {},
3+
properties: {
4+
text: null,
5+
topInfo: null,
6+
bottomInfo: null,
7+
type: null,
8+
color: {
9+
type: String,
10+
value: ''
11+
}
12+
},
13+
methods: {
14+
15+
}
16+
});

‎src/calendar/components/day/index.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"component": true
3+
}

0 commit comments

Comments
 (0)