Skip to content

Commit

Permalink
[F] 日历选择器输入日期始终停留在今天
Browse files Browse the repository at this point in the history
  • Loading branch information
付登荣 committed Jul 9, 2018
1 parent e4b2e22 commit 0b8f62d
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 211 deletions.
194 changes: 5 additions & 189 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,207 +14,23 @@

> 每月最多31天，最少28天。
### 日历模板引入
> 日历模板面板支持 ***手势左右滑动***；
提供 `template` [模板引入](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html)

#### 1. 引入`wxml`及`wxss`
```xml
// example.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
<template is="calendar" data="{{...calendar}}" />
</view>
```
```css
/* example.wxss */
@import '../../template/calendar/index.wxss';
```

#### 2. 日历组件初始化
### 引入 wxml 及 wxss后初始化日历组件直接使用
```js
import initCalendar from '../../template/calendar/index';
const conf = {
onShow: function() {
onShow() {
initCalendar(); // 使用默认配置初始化日历
}
};
Page(conf);
```

#### 3. 日历组件配置

`initCalendar()` 可传入自定义配置

```js
import initCalendar from '../../template/calendar/index';

const conf = {
multi: true, // 是否开启多选,
disablePastDay: true, // 是否禁选过去日期
/**
* 选择日期后执行的事件
* @param { object } currentSelect 当前点击的日期
* @param { array } allSelectedDays 选择的所有日期（当mulit为true时，才有allSelectedDays参数）
*/
afterTapDay: (currentSelect, allSelectedDays) => {},
/**
* 日期点击事件（此事件会完全接管点击事件）
* @param { object } currentSelect 当前点击的日期
* @param { object } event 日期点击事件对象
*/
onTapDay(currentSelect, event) {},
/**
* 日历初次渲染完成后触发事件，如设置事件标记
*/
afterCalendarRender() {},
}

initCalendar(conf);
```

#### 4. `jump()`，跳转至指定日期；

```js
import { jump } from '../../template/calendar/index';

// 不传入参数则默认跳转至今天
jump();
// 入参必须为数字
jump(2018, 6); // 跳转至2018-6
jump(2018, 6, 6); // 跳转至2018-6-6

```

#### 5. 待办事项

##### 5.1 设置日期待办事项标记 `setTodoLabels`；

```js
import { setTodoLabels } from '../../template/calendar/index';

setTodoLabels({
pos: 'bottom',
dotColor: '#40',
days: [{
year: 2018,
month: 5,
day: 12,
}, {
year: 2018,
month: 5,
day: 15,
}],
});
```

##### 5.2 删除指定日期待办事项标记 `deleteTodoLabels`；

```js
import { deleteTodoLabels } from '../../template/calendar/index';

deleteTodoLabels([{
year: 2018,
month: 5,
day: 12,
}, {
year: 2018,
month: 5,
day: 15,
}]);
```

##### 5.3 清空所有日期待办事项标记 `clearTodoLabels()`；

#### 6. 周月视图切换 `switchView('week')`，默认值为'month'；

```js

import { switchView } from '../../template/calendar/index';
// 切换为周视图
switchView('week');

// 切换为月视图
switchView();
// 或者
switchView('month');
```


### 日历选择器模板引入
> 日历模板面板支持 ***手势左右滑动***；
> 此 `template` 带有 `input` 输入框，不影响模板的使用，可配置隐藏；
> 日期选择 input 组件支持直接输入指定日期；
#### 1. 引入`wxml`及`wxss`
```xml
// example.wxml
<import src="../../template/datepicker/index.wxml"/>

<view class="datepicker-box">
<template is="datepicker" data="{{...datepicker}}" />
</view>
```
```css
/* example.wxss */
@import '../../template/datepicker/index.wxss';
```

#### 2. 日期选择器初始化
```js
import initDatepicker from '../../template/datepicker/index';
const conf = {
onShow: function() {
initDatepicker(); // 使用默认配置初始化日历选择器
},
};
Page(conf);
```

#### 3. 日期选择器配置

```js
import initDatepicker from '../../template/datepicker/index';

const conf = {
disablePastDay: true, // 是否禁选过去日期
showInput: false, // 默认为 true
placeholder: '请选择日期', // input 输入框
type: 'normal', // [normal 普通单选模式(默认), timearea 时间段选择模式(待开发), multiSelect 多选模式(待完善)]

/**
* 选择日期后执行的事件
* @param { object } currentSelect 当前点击的日期
*/
afterTapDay: (currentSelect) => {},

/**
* 日期点击事件（此事件会完全接管点击事件）
* @param { object } currentSelect 当前点击的日期
* @param {object} event 日期点击事件对象
*/
onTapDay(currentSelect, event) {},
}

initDatepicker(conf);
```

#### 4. `jumpToToday()`，跳转至今天；

```js
import { getSelectedDay, jumpToToday } from '../../template/datepicker/index';

jumpToToday();

```
更多配置及功能请 [参考文档](http://isfeer.com)

#### 日历模板效果图
### 日历模板效果图

![日历效果图](https://raw.githubusercontent.com/treadpit/wx_calendar/develop/screenshot/screenshot_calendar.gif)

#### 日期选择器效果图
### 日期选择器效果图

![日期选择器](https://raw.githubusercontent.com/treadpit/wx_calendar/develop/screenshot/screenshow_datepicker.gif)
Binary file modified screenshot/screenshow_datepicker.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/app.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"pages":[
"pages/calendarTemplate/index",
"pages/index/index",
"pages/calendar/index",
"pages/calendarTemplate/index",
"pages/datepickerTemplate/index"
],
"window":{
Expand Down
52 changes: 31 additions & 21 deletions src/template/datepicker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,20 +193,47 @@ const conf = {
}
this.setData(tmp);
},
/**
* 跳转至今天
*/
jumpToToday() {
const date = new Date();
const curYear = date.getFullYear();
const curMonth = date.getMonth() + 1;
const curDate = date.getDate();
conf.renderCalendar.call(this, curYear, curMonth, curDate);
},
/**
* 渲染日历
* @param {number} year
* @param {number} month
* @param {number} day
*/
renderCalendar(year, month, day) {
const timestamp = new Date(`${year}-${month}-${day}`).getTime();
this.setData({
'datepicker.curYear': year,
'datepicker.curMonth': month,
'datepicker.todayTimestamp': timestamp,
});
conf.calculateEmptyGrids.call(this, year, month);
conf.calculateDays.call(this, year, month, day);
},
/**
* 初始化日历选择器
* @param {number} curYear
* @param {number} curMonth
* @param {number} curDate
*/
init(curYear = 2018, curMonth = 1, curDate = 1) {
init(curYear, curMonth, curDate) {
const self = _getCurrentPage();
const weeksCh = [ '日', '一', '二', '三', '四', '五', '六' ];
self.setData({
'datepicker.weeksCh': weeksCh,
'datepicker.showDatePicker': true,
});
conf.jumpToToday.call(self);
if (!curYear && !curMonth && !curDate) return conf.jumpToToday.call(self);
conf.renderCalendar.call(self, curYear, curMonth, curDate);
},
/**
* 点击输入框调起日历选择器
Expand All @@ -226,17 +253,17 @@ const conf = {
* @param {object} e 事件对象
*/
onInputDate(e) {
const self = _getCurrentPage();
this.inputTimer && clearTimeout(this.inputTimer);
this.inputTimer = setTimeout(() => {
console.log(e);
const v = e.detail.value;
const _v = (v && v.split('-')) || [];
const RegExpYear = /^\d{4}$/;
const RegExpMonth = /^(([0]?[1-9])|([1][0-2]))$/;
const RegExpDay = /^(([0]?[1-9])|([1-2][0-9])|(3[0-1]))$/;
if (_v && _v.length === 3) {
if (RegExpYear.test(_v[ 0 ]) && RegExpMonth.test(_v[ 1 ]) && RegExpDay.test(_v[ 2 ])) {
conf.init(+_v[ 0 ], +_v[ 1 ], +_v[ 2 ]);
conf.renderCalendar.call(self, +_v[ 0 ], +_v[ 1 ], +_v[ 2 ]);
}
}
}, 500);
Expand Down Expand Up @@ -359,23 +386,6 @@ const conf = {
conf.choosePrevMonth.call(this);
}
},
/**
* 跳转至今天
*/
jumpToToday() {
const date = new Date();
const curYear = date.getFullYear();
const curMonth = date.getMonth() + 1;
const curDate = date.getDate();
const timestamp = new Date(`${curYear}-${curMonth}-${curDate}`).getTime();
this.setData({
'datepicker.curYear': curYear,
'datepicker.curMonth': curMonth,
'datepicker.todayTimestamp': timestamp,
});
conf.calculateEmptyGrids.call(this, curYear, curMonth);
conf.calculateDays.call(this, curYear, curMonth, curDate);
},
};

function _getCurrentPage() {
Expand Down

0 comments on commit 0b8f62d

Please sign in to comment.