Skip to content

Commit

Permalink
feat: 日历组件新增 周选择功能 (#2102)
Browse files Browse the repository at this point in the history
Co-authored-by: lkjh3214 <[email protected]>
  • Loading branch information
lkjh3214 and lkjh3214 authored Feb 10, 2023
1 parent 663f0c3 commit 34294f9
Show file tree
Hide file tree
Showing 8 changed files with 444 additions and 97 deletions.
35 changes: 33 additions & 2 deletions src/packages/__VUE/calendar/demo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,27 @@
>
</nut-calendar>
</div>

<div>
<nut-cell
:show-icon="true"
:title="translate('week')"
:desc="date9 ? `${date9[0]}${translate('conjunction')}${date9[1]}` : translate('please')"
@click="openSwitch('isVisible9')"
>
</nut-cell>
<nut-calendar
v-model:visible="isVisible9"
:default-value="date9"
type="week"
:start-date="`2019-12-22`"
:end-date="`2021-01-08`"
@close="closeSwitch('isVisible9')"
@choose="setChooseValue9"
@select="select"
:first-day-of-week="1"
>
</nut-calendar>
</div>
<h2>{{ translate('title1') }}</h2>
<div>
<nut-cell
Expand Down Expand Up @@ -219,6 +239,7 @@ const initTranslate = () =>
single: '选择单个日期',
range: '选择日期区间',
multiple: '选择多个日期',
week: '选择周',
conjunction: '',
custom_btn: '自定义按钮',
Expand All @@ -243,6 +264,7 @@ const initTranslate = () =>
single: 'Select Single Date',
range: 'Select Date Range',
multiple: 'Select Multiple Date',
week: 'Select Week',
conjunction: '-',
custom_btn: 'Custom Button',
Expand Down Expand Up @@ -270,6 +292,7 @@ interface TestCalendarState extends TestCalendarStateVisible {
date6: string[];
date7: string[];
date8: string;
date9: string[];
}
interface TestCalendarStateVisible {
isVisible: boolean;
Expand All @@ -281,6 +304,7 @@ interface TestCalendarStateVisible {
isVisible6: boolean;
isVisible7: boolean;
isVisible8: boolean;
isVisible9: boolean;
}
export default createDemo({
props: {},
Expand All @@ -299,14 +323,16 @@ export default createDemo({
date6: [],
date7: [],
date8: '',
date9: ['2020-01-23', '2020-01-26'],
isVisible1: false,
isVisible2: false,
isVisible3: false,
isVisible4: false,
isVisible5: false,
isVisible6: false,
isVisible7: false,
isVisible8: false
isVisible8: false,
isVisible9: false
});
const openSwitch = (param: keyof TestCalendarStateVisible) => {
state[`${param}`] = true;
Expand Down Expand Up @@ -356,6 +382,10 @@ export default createDemo({
const setChooseValue8 = (param: string) => {
state.date8 = param[3];
};
const setChooseValue9 = (param: any) => {
let { weekDate } = param;
state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
};
const clickBtn = () => {
let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
state.date5 = date;
Expand Down Expand Up @@ -392,6 +422,7 @@ export default createDemo({
setChooseValue5,
setChooseValue6,
setChooseValue8,
setChooseValue9,
clickBtn,
clickBtn1,
goDate,
Expand Down
64 changes: 63 additions & 1 deletion src/packages/__VUE/calendar/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,69 @@ export default {
</script>
```
:::
### Select Week
When set to week selection, the start and end dates of the week will be determined according to `first-day-of-week`. For example, when `first-day-of-week` is 0, the start date of a week is Sunday. In other cases, the start date of the week is Monday.
:::demo
```html
<template>
<nut-cell
:showIcon="true"
title="Select Week"
:desc="date && date[0] ? `${date[0]}-${date[1]}` : 'Please Select Date'"
@click="openSwitch('isVisible')"
>
</nut-cell>
<nut-calendar
v-model:visible="isVisible"
:default-value="date"
type="week"
:start-date="`2019-12-22`"
:end-date="`2021-01-08`"
@close="closeSwitch('isVisible')"
@choose="setChooseValue"
@select="select"
>
</nut-calendar>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
date: ['2019-12-23', '2019-12-26'],
isVisible: false
});
const openSwitch = param => {
state[`${param}`] = true;
};
const closeSwitch = param => {
state[`${param}`] = false;
};
const setChooseValue= param => {
let { weekDate } = param;
state.date = [weekDate[0].date[3], weekDate[1].date[3]];
};
const select = (param: string) => {
console.log(param);
};
return {
...toRefs(state),
openSwitch,
closeSwitch,
setChooseValue,
select,
};
}
};
</script>
<style lang="scss">
.nut-cell__value {
flex: initial;
}
</style>
```
:::
### Quick Select Single Date
:::demo
```html
Expand Down Expand Up @@ -609,7 +671,7 @@ export default {
| Attribute | Description | Type | Default |
|-------------------|---------------------------------------------------|-----------------|-----------------|
| v-model:visible | whether to show | boolean | `false` |
| type | Calendar type :`one` `range` `multiple` | string | `one` |
| type | Calendar type :`one` `range` `multiple` `week(V4.0.1)` | string | `one` |
| poppable | Whether to display the pop-up window | boolean | `true` |
| is-auto-back-fill | Automatic backfill | boolean | `false` |
| title | whether to show title | string | `Calendar` |
Expand Down
66 changes: 65 additions & 1 deletion src/packages/__VUE/calendar/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,70 @@ export default {
</script>
```
:::

### 选择周
当设置为周选择时,会根据`first-day-of-week` 判断周的起始与结束日期。如`first-day-of-week`为0时,一周的起始日期为星期日。其他情况时,一周的起始日期为星期一。
:::demo
```html
<template>
<nut-cell
:showIcon="true"
title="选择周"
:desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
@click="openSwitch('isVisible')"
>
</nut-cell>
<nut-calendar
v-model:visible="isVisible"
:default-value="date"
type="week"
:start-date="`2019-12-22`"
:end-date="`2021-01-08`"
@close="closeSwitch('isVisible')"
@choose="setChooseValue"
@select="select"
>
</nut-calendar>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
date: ['2019-12-23', '2019-12-26'],
isVisible: false
});
const openSwitch = param => {
state[`${param}`] = true;
};
const closeSwitch = param => {
state[`${param}`] = false;
};
const setChooseValue= param => {
let { weekDate } = param;
state.date = [weekDate[0].date[3], weekDate[1].date[3]];
};
const select = (param: string) => {
console.log(param);
};
return {
...toRefs(state),
openSwitch,
closeSwitch,
setChooseValue,
select,
};
}
};
</script>
<style lang="scss">
.nut-cell__value {
flex: initial;
}
</style>
```
:::
### 快捷选择-单选
:::demo
```html
Expand Down Expand Up @@ -624,7 +688,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|---------------------------------------------------|-----------------|-----------------|
| v-model:visible | 是否可见 | boolean | `false` |
| type | 类型,日期单择`one`,区间选择`range`,日期多选`multiple` | string | '`one`' |
| type | 类型,日期单择`one`,区间选择`range`,日期多选`multiple`,周选择`week`(`v4.0.1`) | string | '`one`' |
| poppable | 是否弹窗状态展示 | boolean | `true` |
| is-auto-back-fill | 自动回填 | boolean | `false` |
| title | 显示标题 | string | `日期选择` |
Expand Down
67 changes: 66 additions & 1 deletion src/packages/__VUE/calendar/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,71 @@ export default {
</script>
```
:::

### 选择周
当设置为周选择时,会根据`first-day-of-week` 判断周的起始与结束日期。如`first-day-of-week`为0时,一周的起始日期为星期日。其他情况时,一周的起始日期为星期一。

:::demo
```html
<template>
<nut-cell
:showIcon="true"
title="选择周"
:desc="date && date[0] ? `${date[0]}至${date[1]}` : '请选择'"
@click="openSwitch('isVisible')"
>
</nut-cell>
<nut-calendar
v-model:visible="isVisible"
:default-value="date"
type="week"
:start-date="`2019-12-22`"
:end-date="`2021-01-08`"
@close="closeSwitch('isVisible')"
@choose="setChooseValue"
@select="select"
>
</nut-calendar>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
date: ['2019-12-23', '2019-12-26'],
isVisible: false
});
const openSwitch = param => {
state[`${param}`] = true;
};
const closeSwitch = param => {
state[`${param}`] = false;
};
const setChooseValue= param => {
let { weekDate } = param;
state.date = [weekDate[0].date[3], weekDate[1].date[3]];
};
const select = (param: string) => {
console.log(param);
};
return {
...toRefs(state),
openSwitch,
closeSwitch,
setChooseValue,
select,
};
}
};
</script>
<style lang="scss">
.nut-cell__value {
flex: initial;
}
</style>
```
:::
### 快捷选择-单选
:::demo
```html
Expand Down Expand Up @@ -614,7 +679,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|---------------------------------------------------|-----------------|-----------------|
| v-model:visible | 是否可见 | boolean | `false` |
| type | 类型,日期单择`one`,区间选择`range`,日期多选`multiple` | string | '`one`' |
| type `v4.0.1` | 类型,日期单择`one`,区间选择`range`,日期多选`multiple`,周选择`week`(`v4.0.1`) | string | '`one`' |
| poppable | 是否弹窗状态展示 | boolean | `true` |
| is-auto-back-fill | 自动回填 | boolean | `false` |
| title | 显示标题 | string | `日期选择` |
Expand Down
Loading

0 comments on commit 34294f9

Please sign in to comment.