afap/xcx-plugins

小程序组件

XCX-Plugins

小程序组件

日历控件：

1.声明组件

下载代码，将components文件夹拷贝至项目根目录（与app.json平级），在app.json中声明需要使用的插件，这里的声明是全局的，pages下的页面都能直接用，也可以在某一个page对应的json文件中单独声明。

{
  "pages": [
    "pages/demo/calendar"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "usingComponents": {
    "calendar": "/components/calendar/index"
  },
  "sitemapLocation": "sitemap.json"
}

*组件的名字可以自定义，如calendar可以改成calendar666，页面内使用时保持一致即可。

2.使用组件

最简单的方式：

<calendar />

带有一些默认设置的方式

<calendar bindOnDayClick="onDayClick" days-style='{{daysStyle}}' />

3.可设置属性

属性名称	类型	默认值	说明
mode	String	normal	模式： normal:常规； picker: 下拉选取日期 pickerRange: 下拉选择区间
placeholder	String	无	提示语
title	String	xxx年x月	日历标题,如设定值，在月份切换时需要自己设置title值
weekdays	Array	['日', '一', '二', '三', '四1', '五', '六']	如自定义，数组长度需为7
language	String	ZH	语言： ZH：中文 EN：英语，不同语言，年月和星期显示不同
selectedMode	String	round	被选中日期背景模式： round：圆形 square方形
showMoreMonths	Boolean	true	是否显示上下月份
showMoreDays	Boolean	true	是否显示非本月日期
year	Number	当前年份	年份
month	Number	当前月份	月份，注意：此处值从1开始，1-12
selectedDate	String	当天	被选中日期，格式yyyy-MM-DD
beginDate	String	开始日期	范围模式开始日期，格式yyyy-MM-DD
endDate	String	结束日期	范围模式结束日期，格式yyyy-MM-DD
minDate	String	最小日期	可选的最小日期，格式yyyy-MM-DD，小于该日期的日期，不可点击
maxDate	String	最大日期	可选的最大日期，格式yyyy-MM-DD，大于该日期的日期，不可点击
daysStyle	Array	无	指定日期样式数组，如：[{id: '2019-07-30',style: 'color: red;'}]会改变2019-07-30的日期颜色，此处是style，可以自由设置属性，会改变整个单元格样式
dotDays	Array	无	指定日期显示标记点，如：[ '2019-10-30']
daysDesc	Array	无	指定日期描述，如：[{id: "2020-03-02",desc: "有事",style: 'color: #FF0000;'}]
dotColor	String	red	点颜色

4.监听事件

事件名称	说明
bindOnDayClick	点击某一天时触发： event.detail为被点击日期的Date对象
bindOnRangeComplete	范围选择完毕时触发： event.detail为{begin:dateObj,end:dateObj}
bindOnMonthChange	切换月份时触发： event.detail为当前月份第一天的Date对象

示例图片：

手写绘制控件：

1.声明组件

下载代码，将components文件夹拷贝至项目根目录（与app.json平级），在app.json中声明需要使用的插件，这里的声明是全局的，pages下的页面都能直接用，也可以在某一个page对应的json文件中单独声明。

{
  "pages": [
    "pages/demo/handwriting"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "usingComponents": {
    "handwriting": "/components/handwriting/index"
  },
  "sitemapLocation": "sitemap.json"
}

*组件的名字可以自定义，如handwriting可以改成handwriting666，页面内使用时保持一致即可。

2.使用组件

最简单的方式：

<handwriting />

带有一些默认设置的方式

<handwriting bindOnComplete="onHnadwritingComplete" />

3.可设置属性

• 暂无

4.监听事件

事件名称	说明
bindOnComplete	点击完成时触发：event.detail为绘制得到的图片临时存储路径

示例图片：

xcx-plugins's Issues

范围选择日期的日期动态初始化页面无法更新

beginDate和endDate如果是直接写在data里是可以初始化的，但是动态获取setData的时候就不行了

希望传入一个数组【2019-12-03,2019-12-31】，让这段时间是整个区间选中的效果

[Bug] mode normal 下的 不同时区下月日历显示有误

我遇到的问题：澳大利亚时区下的2021年4月，显示有两个4日；定位到的问题

我的解决方案：

在components/calendar/index.js 文件
使用moment 的日期库
// let date = new Date(currenDate.getTime() + 86400000 * i);
let date = new Date(moment(currenDate.getTime()).add(i, 'days').valueOf())

而且进一步在 getMonthDayCount 方法获取 一个月的天数最好也是使用 moment

// return (d_next_month_first_day.getTime() - d_first_day.getTime()) / 86400000;
return moment(d_next_month_first_day.getTime()).diff(moment(d_first_day.getTime()), 'days')

区间选择模式，会出现第一次点击没有选中效果

希望加一个属性，最大最小时间（max和min），控制所选的最大最小范围

可不可规定日期范围

日历上展示日期区间可以选择为黑色， 超出日期区间可以展示为灰色

[bug] 在页面的非第一屏引用时,样式出现问题

在页面的非第一屏引用时,样式出现问题

demo.wxml

<view>内容</view>
 <!-- 其中内容超过一屏可显示范围 -->
<view>内容</view>

<calendar mode='pickerRange'/>

<view>少量内容,不足以填充calendar的高度时</view>

calendar的wxml中,下拉的日历view定位为fixed,在组件之后没有内容或内容过少,会出现下拉日历显示不全的问题

怎么在日期加个备注，比如“中秋节”？

是用placeholder吗？你只告诉是string，但是没说怎么用啊！